Hello Guys, How are you all? Hope You all Are Fine. Today I am trying to using function But I am facing following error: Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead in Reactjs. So Here I am Explain to you all the possible solutions here.
Without wasting your time, Let’s start This Article to Solve This Error.
- How Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead Error Occurs ?
- How To Solve Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead Error ?
- Solution 1: Remove async
- Solution 2: Use Just like this
- Summary
How Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead Error Occurs ?
I am trying to using function But I am facing following error.
Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
Here is my code.
getUserData = async () => {
try {
let res = await axios.get('/users');
let usr = res.data;
return usr.map((users, i) => {
return (
<li key={i} className="list-group-item">{users.name}</li>
);
});
} catch (err) {
console.log("Unknown Error Occurs");
}
}
render () {
return (
<div>
<ul className="list-group list-group-flush">
{this.getUserData()}
</ul>
</div>
);
}
How To Solve Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead Error ?
How To Solve Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead Error ?
To Solve Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead Error Here Async Function will return Promis Not Origional Data Thats Why You are facing above error. You Just need to set All Data in vaiable and then You can Use It Just Like this. Now, Your error must be solved.
Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead
To Solve Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead Error Here You Just need to Remove async from funcion Just like below Example: getUserData = async () => { // Just remove this async } Now, Your error may be solved.
Solution 1: Remove async
Here You Just need to Remove async from funcion Just like below Example.
getUserData = async () => { // Just remove this async
.
.
.
}
Now, Your error may be solved.
Solution 2: Use Just like this
Here Async Function will return Promis Not Origional Data Thats Why You are facing above error. You Just need to set All Data in vaiable and then You can Use It Just Like this.
getUserData = async() => {
.
.
.
const res = await axios.get('/users');
const users = res.data;
// set Promis data into Users variable
this.setState({
Users: users
});
.
.
.
}
render() {
const usersData = this.state.Users?.map((post, i) => (
<li key={i} className="list-group-item">{users.name}</li>
));
return (
<div>
<ul className="list-group list-group-flush">
{usersData}
</ul>
</div>
);
}
Now, Your error must be solved.
Summary
It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?
Also, Read