Reputation: 2496
I want to get list of users using reactJS 15.5
, Code:
constructor(props) {
super(props);
this.state = {
values: []
};
this.getDataFromUser = this.getDataFromUser.bind(this);
}
render() {
return (
<div>
<button onClick={this.getDataFromUser}>Fetch</button>
<p>
{this.state.values}
</p>
</div>
);
}
getDataFromUser(){
fetch('http://localhost:8000/api/user')
.then(response => response.json())
.then(json => {
console.log(json);
this.setState({values: json })
})
}
But i get this error when i click in button Fetch so error in getDataFromUser:
Unhandled Rejection (Invariant Violation): Objects are not valid as a React child (found: object with keys {id, nom, prenom, email,is_admin,created_at, updated_at}). 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.
There's a why to create user object, So anyone can help me to resolve this issue and thanks
Upvotes: 1
Views: 5482
Reputation: 104499
Its an array of objects so you need to use map
to iterate the array then render the specific values.
Like this:
render() {
return (
<div>
<button onClick={this.getDataFromUser}>Fetch</button>
<p>
{this.state.values.map(el => {
return <div key={el.id}>
<span>{el.email}</span>
<span>{el.nom}</span>
<span>{el.is_manager}</span>
</div>
})}
</p>
</div>
);
}
Upvotes: 2
Reputation: 938
You are trying to return an invalid object/array in your react component. In your case you should try and iterate through the array(this.state.values) and render the items(string values) needed.
render() {
const { values } = this.state;
return (
<div>
<button onClick={this.getDataFromUser}>Fetch</button>
<p>
{values.map((value, index) =>
(<div key={index}>{value.nom}</div>)
)}
</p>
</div>
);
}
Looking at the error it looks like the new state of this.state.values is rather an object with the following keys {id, nom, prenom, email,is_admin,created_at, updated_at}. So the below code would work for u.
render() {
const { values } = this.state;
return (
<div>
<button onClick={this.getDataFromUser}>Fetch</button>
<p>
{values &&
<div>
{values.nom}
{values.prenom}
{values.email}
etc.
</div>
}
</p>
</div>
);
}
Upvotes: 1