CODEWITHSUNDEEP
reactjs
user5323957
user5323957

Reputation: 552

Getting Error Like Objects are not valid as a React child In ReactJs

I Wrote A Code With Supplied Data Like 

var todos = [
{
        task: 'A',
        isComplete: false
},
{
        task: 'B',
        isComplete: true
}
]

And Expecting Output Like ToDoList But Getting Error Objects are not valid as a React child (found: object with keys {task, isComplete}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Todolist. My Codes Are

var todos = [
{
        task: 'A',
        isComplete: false
},
{
        task: 'B',
        isComplete: true
}
]
var App = React.createClass({
    getInitialState:function(){
        return ({
            data:todos
        });
    },
    render: function() {
        return (
            <div className="well">
                <h1 className="well text-primary text-center">React ToDo App</h1>
                <Todolist data={this.state.data}/>
            </div>
        );
    }
});
var Todolist = React.createClass({
    render: function() {
        var abc = this.props.data.map(function(value){
            return(
                <td key={value}>{value}</td>
            );
        });
        return (
            <div>
                <table className="table table-bordered">
                    <thead>
                    <tr>
                        <th>Task</th>
                        <th>IsCompleted</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                     {abc}
                    </tr>
                    </tbody>
                </table>
            </div>
        );
    }
});
ReactDOM.render(
<App/>,
document.querySelector("#app")
);
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="app">
    <!-- This element's contents will be replaced with your component. -->
</div>

Fiddle Link

Upvotes: 1

Views: 1906

Answers (1)

Oleksandr T.
Oleksandr T.

Reputation: 77482

key must have only unique values and can not be Object, in this case you can use index as a key or if task has only unique values you can use it too., also you should change { value } to { value.task } because value is Object and JSX does not know what do you want to show task property or isComplete

var abc = this.props.data.map(function(value, index) {
   return (<td key={ index }>{ value.task }</td>);
});

Example

Upvotes: 1

Related Questions