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

how to return multiple components in react

Cashecode answered on January 28, 2022 Popularity 9/10 Helpfulness 2/10

answer how to return multiple components in react

related Return multiple elements inside React.render()

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 return typescript

Link to this answer
Share Copy Link

Contributed on Jan 28 2022

Cashecode

0 Answers Avg Quality 2/10

Closely Related Answers

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 javascrip

Link to this answer
Share Copy Link

Contributed on Feb 11 2023

Ziad Kermadi

0 Answers Avg Quality 2/10

how to return multiple components in react

Contents

More Related Answers

how to return multiple components in react

Closely Related Answers

Return multiple elements inside React.render()

Grepper

Documentation

Social

Legal

Contact

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