Is there a way to render multiple React components in the React.render() function?

by

Since the React v16.0 release you can render an array of components without wrapping items in an extra element when you are inside a component:

render() {
  return [
    <li key="one">First item</li>,
    <li key="two">Second item</li>,
    <li key="three">Third item</li>,
    <li key="four">Fourth item</li>,
  ];
}

Remember only to set the keys.

UPDATE

Now from the 16.2 version you can use the Fragments

  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }

Short syntax

  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }

In the ReactDOM.render you still can’t render multiple items because react needs a root. So you can render a single component inside the ReactDOM.render and render an array of items in the internal component.

More Related Contents:

  1. Unable to access React instance (this) inside event handler [duplicate]
  2. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  3. Browserify, Babel 6, Gulp – Unexpected token on spread operator
  4. SyntaxError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’ – Gulp
  5. React.js – Syntax error: this is a reserved word in render() function
  6. Unable to use Arrow functions inside React component class [duplicate]
  7. Importing CSS files in Isomorphic React Components
  8. Is it okay to use babel-node in production
  9. How to load es6, react, babel code in html with cdn?
  10. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  11. Disable chrome react DevTools for production
  12. Exporting functions with reactjs and babel
  13. Why does babel rewrite imported function call to (0, fn)(…)?
  14. How to avoid bind or inline arrow functions inside render method
  15. React ‘cannot read property of undefined’ when using map
  16. How to pass data from a page to another page using react router
  17. How to call loading function with React useEffect only once
  18. How to use componentWillMount() in React Hooks?
  19. Why is immutability so important (or needed) in JavaScript?
  20. setInterval in a React app
  21. Warning: Each child in a list should have a unique “key” prop even tho it has unique key React
  22. Single Page Application and CSRF Token
  23. Navigate to screen after opening a notification?
  24. How to hide bottom navigation bar on a specific screen in react native?
  25. Do we still need functional setState way in react hooks?
  26. React 18 strict mode causing component to render twice [duplicate]
  27. Reactjs-setState previous state is the first argument, props as the second argument
  28. React Router BrowserRouter leads to “404 Not Found – nginx ” error when going to subpage directly without through a home-page click
  29. Destructuring of es6 but passing dynamic variable
  30. updateProfile is not a function (Firebase)

Leave a Comment