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

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

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/