Return multiple elements inside React.render()

by

In React < v16.0 the render method can only render a single root node. (update: this is changed in v16, see below). In your case, you’re returning 3 nodes. To get around this you can wrap your 3 nodes in a single root node:

render: function(){
  return (
    <div>
      <h3>Account</h3>
      <a href="#" onClick={some_event}>Login</a>
      <a href="#" onClick={some_event}>Logout</a>
    </div>
)}

In React v16 it’s possible for render() to return an array of elements.

Like with other arrays, you’ll need to add a key to each element to avoid the key warning:

render() {
  return [
    <ChildA key="key1" />,
    <ChildB key="key2" />,
    <ChildC key="key3" />,
  ];
}

Another option is to use a Fragment. Fragments let you group a list of children without adding extra nodes to the DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

There is also a short syntax (<>) for declaring fragments:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

More Related Contents:

  1. Arrow function without curly braces
  2. Show or hide element in React
  3. How to set focus on an input field after rendering?
  4. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  5. react router v6 navigate outside of components
  6. Correct use of arrow functions in React
  7. Reactjs setState() with a dynamic key name?
  8. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  9. How can I update state.item[1] in state using setState?
  10. ReactJS – .JS vs .JSX
  11. TypeError: Cannot read property ‘setState’ of undefined
  12. Is this the correct way to delete an item using redux?
  13. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
  14. Active link with React-Router?
  15. reactjs this.refs vs document.getElementById
  16. Cleaner/shorter way to update nested state in Redux?
  17. How to make Puppeteer work with a ReactJS application on the client-side
  18. React js change child component’s state from parent component
  19. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  20. React-router: How to manually invoke Link?
  21. children prop in React component
  22. Simulate click event on react element
  23. Is it possible to use dotenv in a react project?
  24. having multiple instance of same reusable redux react components on the same page/route
  25. Electron IPC and nodeIntegration
  26. add raw HTML with inside Gatsby React page
  27. React JS Server side issue – window not found
  28. Object is not extensible error when creating new attribute for array of objects
  29. How to set iframe content of a react component
  30. How should I alternate componentWillMount()?

Leave a Comment