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

Question

I have the following code: response.js that throws an error

"Adjacent JSX elements must be wrapped in a female tag." It seems that React is not accepting the same tags next to each other, how do I display tabular data?

var TestRecords = React.createClass({ render: function() { return( <table> <tr> {this.props.records.map(record=>{ return <td>{record.title}</td><td>record.id</td> } )} </tr> </table> ); } }); 

Answer 1

With React, you can provide only two parts of the component tree: node (element) or a set of nodes.

Here you provide two nodes (two td s). You need to either wrap them in tr or return them as an array (with key attributes). This example is also less than ideal, as it seems that your generator should probably include tr first.

Try

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

Answer 2

Can you try as below

 var TestRecords = React.createClass({ render: function() { return( <table> <tr> {this.props.records.map(record=>{ return <tr> <td>{record.title}</td> <td>record.id</td> </tr> } )} </tr> </table> ); } }); 

The error is that the card is trying to return two td elements. This may be the cause of the error.

Answer 3

I came across this several times, just doing the following: I like to keep the logic from "return" as much as possible. Just a preference.

 var TestRecords = React.createClass({ render: function() { var trDisplay = this.props.records.map((record, idx)=>{ return( <tr key={idx}> <td>{record.title}</td><td>{record.id}</td> </tr> } )} return( <table> {trDisplay} </table> ); } });