Breaking News: Grepper is joining You.com. Read the official announcement!

Return multiple elements inside React.render()

Ziad Kermadi answered on January 28, 2022 Popularity 8/10 Helpfulness 1/10

answer Return multiple elements inside React.render()

related how to return multiple components in react

Return multiple elements inside React.render()

Comment

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 />
    </>
  );
}

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: elements javascript return

Link to this answer
Share Copy Link

Contributed on Feb 11 2023

Ziad Kermadi

0 Answers Avg Quality 2/10

Closely Related Answers

how to return multiple components in react

Comment

const Pets = () => {
  return (
    <Fragment>
      <Dog />
      <Cat />
    </Fragment>
  )
}

Popularity 9/10 Helpfulness 2/10 Language typescript

Source: flaviocopes.com

Tags: components c

Link to this answer
Share Copy Link

Contributed on Jan 28 2022

Cashecode

0 Answers Avg Quality 2/10

Return multiple elements inside React.render()

Contents

More Related Answers

Return multiple elements inside React.render()

Closely Related Answers

how to return multiple components in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.