Return multiple elements from a component with React 16
React 16 is here and it brings lots of exciting changes. One of the most requesting features around React community has been returning multiple elements from a component’s render method. Skipping wrapper tag is definitely something that developers are happy about — popularity of my tweet proves this point.
Return multiple elements in @reactjs 16 ❤️#js #javascript #react #reactjs pic.twitter.com/uPGyxUGtWn
— Paweł Grzybek (@pawelgrzybek) September 29, 2017
The basic way is to return an array of elements. To avoid warnings you have to add a key to each element, although it may not be needed in the future.
const App = () => [
<p key="1">React 16 can return multiple elements ❤️</p>,
<p key="2">React 16 can return multiple elements ❤️</p>,
<p key="3">React 16 can return multiple elements ❤️</p>,
];
See the Pen 2017-10-02-1 by Pawel Grzybek (@pawelgrzybek) on CodePen.
To avoid array notation and manually added keys to each of the element, you can use an Aux helper function that simply returns all its children. Like so…
const Aux = props => props.children;
const App = () =>
<Aux>
<p>React 16 can return multiple elements ❤️</p>
<p>React 16 can return multiple elements ❤️</p>
<p>React 16 can return multiple elements ❤️</p>
</Aux>;
See the Pen 2017-10-02-2 by Pawel Grzybek (@pawelgrzybek) on CodePen.
UPDATE!
React v16.2 introduced another way of returning multiple elements. React.Fragment abstracted in JSX way via just an empty tag. Bare in mind that JSX syntax doesn’t support attributes — use a verbose way if you need so. No extra components needed, no array notation, no keys. Nice!
const App = () => (
<>
<p>React 16 can return multiple elements ❤️</p>
<p>React 16 can return multiple elements ❤️</p>
<p>React 16 can return multiple elements ❤️</p>
</>
);
// if your build tool goes crazy, do this…
const App = () => (
<React.Fragment>
<p>React 16 can return multiple elements ❤️</p>
<p>React 16 can return multiple elements ❤️</p>
<p>React 16 can return multiple elements ❤️</p>
</React.Fragment>
);
See the Pen 2017-10-02-3 by Pawel Grzybek (@pawelgrzybek) on CodePen.
Nice! Isn’t it?! Find out about more really cool features added in the new version of React in this great Egghead course by Nik Graf.
Did you find it helpful? Consider to hit the share button below to make me more popular than I am! Have a great day you all 🥑
I usually wrap multiple elements with div or span tag, and it dose the trick.
facepalm
Why? is that wrong approach?
The whole idea of of this post is to avoid wrapping multiple elements in a container tag. Just use one of the methods presented. above since today my friends and you will be fine. It generates way cleaner output markup and you won't struggle to work with modern layout systems like flexbox or grid.
Have a great weekend :)
Good work - this really helped me. I been fighting with this for a day!
I am glad that you found it useful!
Maybe you want to insert a coumple of <td/> inside its <tr> as an element variable, not using a <div> wrapping the td's would be a good idea.
https://reactjs.org/docs/fr...
Of course. It is another really good use case. bunch of <li> elements inside a list can be another one. I can think of hundreds of them. Hopefully I explained the concept well and developers will take it from here…
thanks man this was very helpful!
I am glad you found it helpful :)
what if i use component name instead of p tag and there are multiple components to render in one component....plzz guide
like
but i am having error in this " super should be empty or function"
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import Image from './components/img';
import Napp from './components/nav';
class App extends React.Component {
render() {
return (
<div>
<image/>
<napp/>
</div>
);
}
}
ReactDOM.render(<app/>,document.getElementById('root'));
export default App;
Hi.
It doesn't matter if it is a HTML element or a React component. So...
Hopefully that helps.
Ps. Disqs converts the names of a components to lower case. I don't know ow to prevent that.
thanks
Please how do i access only one part of the return element
If you want to return a single element from React component, don't make one that returns multiple of them in the first place. I see no valid use case of making component returning multiple top level elements and force it to return just one.