How do I render sibling elements without wrapping them in a parent tag?
Woohoo! The React team finally added this feature. As of React v16.0, you can do:
render() {
// No need to wrap list items in an extra element!
return [
// Don't forget the keys :)
<tr key="a"><td>Item 1</td></tr>,
<tr key="b"><td>Item 2</td></tr>
];
}
See the full blog post explaining "New render return types: fragments and strings" here.
I know this has been an old post, but maybe my answer could be a help for newbies like me.
In React 16.2, improved support for Fragments was added.
You can now return it like this:
return (
<>
<tr><td>Item 1</td></tr>
<tr><td>Item 2</td></tr>
</>
);
You can wrap it with <></>
or <Fragment></Fragment>
.
If you would like to pass some attributes, only key is supported at the time of writing, and you'll have to use <Fragment />
since the short syntax <></>
doesn't accept attributes.
Note: If you are going to use the short syntax, make sure that you are using Babel 7.
Source Reference
This is a limitation currently, but will likely be fixed at some point in the future (there's some open issues on the github repo).
For now, you can use a function which returns an array (this is basically a stateless component):
function things(arg, onWhatever){
return [
<tr><td>Item 1</td></tr>,
<tr><td>Item 2</td></tr>
];
}
And use that in your component.
return (
<table><tbody>
{things(arg1, this.handleWhatever)}
{things(arg2, this.handleWhatever)}
</tbody></table>
);
Update
In React 16 you will be able to return an array from render.
Another Update
You can now either return a top level array, or use <React.Fragment>
.
With an array we need to place a key on each item, as React doesn't know that the two elements are constant, instead of a dynamically created list:
function RowPair() {
return [
<tr key="first"><td>First</td></tr>,
<tr key="second"><td>Second</td></tr>,
]
}
With React.Fragment
, it behaves much more like wrapping it in a <div>
or similar, where a key
isn't required if we're not building the children dynamically. First, we can wrap the array in a Fragment:
function RowPair() {
return <React.Fragment>{[
<tr key="first"><td>First</td></tr>,
<tr key="second"><td>Second</td></tr>,
]}</React.Fragment>
}
And then we can eliminate the array and key
s entirely:
function RowPair() {
return <React.Fragment>
<tr><td>First</td></tr>
<tr><td>Second</td></tr>
</React.Fragment>
}