Jay Jay - 5 months ago 175x
Javascript Question

React.js Error "Adjacent JSX elements must be wrapped in an enclosing tag"

I have the below code is react.js which is throwing an error

"Adjacent JSX elements must be wrapped in an enclosing tag". It looks like React isnt accepting same tags next to each other how do I display tabular data?

var TestRecords = React.createClass({ render: function() {
return <td>{record.title}</td><td>record.id</td>
); } });


With React, you may only provide two things to a component tree - a node (element) or a collection of nodes.

Here you're providing two nodes (two tds). You need to either wrap them in a tr, or return them as an array (with key attributes). Also less ideal in this example since it appears that your generator should probably include tr in the first place.


return (
    {this.props.records.map(record => ( // implicit return
      <tr key={record.id}>