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
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With