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(
        <table>
          <tr>
            {this.props.records.map(record=>{
              return <td>{record.title}</td><td>record.id</td>
            }
          )}
        </tr>
      </table>
    );    
  }  
});

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(
        <table>
          <tr>
            {this.props.records.map(record=>{
              return <td>{record.title}</td><td>record.id</td>
            }
          )}
        </tr>
      </table>
    );    
  }  
});

• javascript
• reactjs

3 Answers 3

With React, you may only provide two things to a ponent 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.

Try

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

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>
    );    
  }  
});

Error is because the map is trying to return two td elements. Which could be the reason for the error

I've run across that a few times, just do the following: I like to keep as much logic out of the "return" 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>
                 );    
               }  
       });