'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\"         


        

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/