We simply cannot write “ in ReactJS?

by

We could pass all HTML attributes to a React component as a prop and then inside the component’s render function assign those props to the actual DOM HTML element.

const Foo = ({style}) => (
   <div style={style}> // assigning inline style to HTML dom element 
    This is Foo 
   </div>
)

<Foo style={color: 'red'} /> // passing style as a prop to Foo react component

You can use JSX spread attributes and make it more flexible so you won’t have to specify individual HTML attributes as a prop. You simply spread restProps over your HTML element. 

const Foo({ name, ...restProps }) => {
  return <div {...restProps}>{name}</div>;
}

Now you can pass DOM attributes to Foo and they’ll be passed through to div.

<Foo 
 name="This is Foo"
 className="foo-class"
 id="my-foo"
 style="color: red"
/>

When you use <> ... </> this is a shorthand of <React.Fragment>...</React.Fragment> which lets you only group multiple list of children WITHOUT adding extra node to the DOM when it gets rendered. 

 return (
    <>
      <Foo />
      <Foo />
      <Foo />
    </>
  );

This will render as 

<div>This is Foo</div>
<div>This is Foo</div>
<div>This is Foo</div>

so if you find yourself need to pass a HTML attribute to <>...</> you can simply change react fragment to a <div>...</div> or <span>...</span> or other proper HTML elements and set your attribute on.

More Related Contents:

  1. How to compare oldValues and newValues on React Hooks useEffect?
  2. What is mapDispatchToProps?
  3. Get form data in ReactJS
  4. Does React batch state update functions when using hooks?
  5. React router changes url but not view
  6. Cannot read property ‘map’ of undefined in React
  7. Unable to load script.Make sure you are either running a Metro server or that your bundle ‘index.android.bundle’ is packaged correctly for release
  8. Why do I get the error “expressions must have one parent element”, how do I fix this?
  9. What is the difference between HashRouter and BrowserRouter in React?
  10. How to set default Checked in checkbox ReactJS?
  11. React Child Component Not Updating After Parent State Change
  12. Call a React component method from outside
  13. Set types on useState React Hook with TypeScript
  14. How to get the width of a react element
  15. Typescript react – Could not find a declaration file for module ”react-materialize’. ‘path/to/module-name.js’ implicitly has an any type
  16. How to resolve the error on ‘react-native start’
  17. ReactJS lifecycle method inside a function Component
  18. Element type is invalid: expected a string (for built-in components) or a class/function
  19. Class extends React.Component can’t use getInitialState in React
  20. Question mark before dot in javascript / react [duplicate]
  21. React this.state is undefined?
  22. How do I type this ‘as’ JSX attribute in TypeScript?
  23. how to change jest mock function return value in each test?
  24. How to set build .env variables when running create-react-app build script?
  25. ReactJS – prevState in the new useState React hook?
  26. Image elements do not have explicit width and height
  27. You cannot render a inside another . You should never have more than one in your app
  28. How to go back to previous route in react-router-dom v6
  29. React – “localStorage is not defined” error showing
  30. Is it possible to return empty in react render function?

Leave a Comment