Jay Jay - 2 years ago 568
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>
); } });

Answer Source

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}>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download