'A valid React element (or null) must be returned' error with one of the component in ReactJS

Question

My code is something like this

var data = [
    {id: 1, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"},
    {id: 2, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"},
    {id: 3, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"},
    {id: 4, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"},
    {id: 5, taskName: "Pete Hunt", standarDescription: "This is one comment", emplComment: "meaaow I am meeawo", empRating : "1"}
];

var Tableforbasictask = React.createClass({
  render: function() {
    return (
     <div className="downloadlinks">
      <table className="table table-bordered table-striped-col nomargin" id="table-data">
      <tbody>
        <tr align="center">
            <td>Task  Name</td>
            <td>Standard Discription of Task</td>
            <td>Employee Comment</td>
            <td>Employee rating</td>
        </tr>
        <TableforbasictaskList data={this.props.data} />
        <TableforbasictaskForm />
        </tbody>
      </table>
      </div>
    );
  }
});

var TableforbasictaskForm = React.createClass({
    render: function() {
      return (
        <div className="commentForm">
          Hello, world! I am a CommentForm.
        </div>
      );
    }
  });

var Addcontenttotable = React.createClass({
render: function() {
  return (
    <tr><td>{this.props.taskName}</td>
        <td>{this.props.standarDescription}</td>
        <td>{this.props.emplComment}</td>
        <td>{this.props.empRating}</td>
    </tr>
  );
}
});

var TableforbasictaskList = React.createClass({
render: function() {
  var commentNodes = this.props.data.map(function(comment) {
    return (
      <Addcontenttotable taskName={comment.taskName} standarDescription={comment.standarDescription} emplComment={comment.emplComment} empRating={comment.empRating} key={comment.id}>
      </Addcontenttotable>
    );
  });
  return (
      {commentNodes}
  );
}
});
ReactDOM.render(<div><Tableforbasictask data={data}  /></div>, document.getElementById('content'));

All I am trying to do is List the detail from the Json data into a table form . I will be adding an API to fetch that JSON in Future

but I am getting following error

Error: TableforbasictaskList.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Here is the JSFIDDLE

Any help is appreciated

Answer 1

React component must have only one root node ., as you are using TableforbasictaskList inside table you need wrap commentNodes in <tbody> ., also inside Tableforbasictask move TableforbasictaskForm from table

var TableforbasictaskList = React.createClass({
  render: function() {
    // .....
    return (<tbody>{commentNodes}</tbody>);
  }
});

var Tableforbasictask = React.createClass({
  render: function() {
    return <div className="downloadlinks">
      <table
        className="table table-bordered table-striped-col nomargin"
        id="table-data"
      >
        <thead>
          <tr align="center">
            <td>Task  Name</td>
            <td>Standard Discription of Task</td>
            <td>Employee Comment</td>
            <td>Employee rating</td>
          </tr>
        </thead>
        <TableforbasictaskList data={this.props.data} /> 
      </table>
      <TableforbasictaskForm />
    </div>
  }
});

Example

Answer 2

render should return single root element https://jsfiddle.net/69z2wepo/41120/

return (<div>
    {commentNodes}
</div>);

Update. More valid option using tbody as a wrapper

return (<tbody>
    {commentNodes}
</tbody>);

https://jsfiddle.net/69z2wepo/41125/