Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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

like image 239
Vikram Anand Bhushan Avatar asked May 06 '16 13:05

Vikram Anand Bhushan


2 Answers

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

like image 60
Oleksandr T. Avatar answered Oct 21 '22 08:10

Oleksandr T.


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/

like image 23
Yury Tarabanko Avatar answered Oct 21 '22 07:10

Yury Tarabanko