Objects are not valid as a React child (found: [object Promise])
JavascriptReactjsJavascript Problem Overview
I am trying to render a list of posts by mapping through an array. I've done this many times before but for some reason
renderPosts = async () => {
try {
let res = await axios.get('/posts');
let posts = res.data;
return posts.map((post, i) => {
return (
<li key={i} className="list-group-item">{post.text}</li>
);
});
} catch (err) {
console.log(err);
}
}
render () {
return (
<div>
<ul className="list-group list-group-flush">
{this.renderPosts()}
</ul>
</div>
);
}
All I get is:
> 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.
I've checked the data returned from renderPosts and it is an array with the correct values and no promises. What's going on here?
Javascript Solutions
Solution 1 - Javascript
I also received the same error message when creating an async functional component. Functional components should not be async.
const HelloApp = async (props) => { //<<== removing async here fixed the issue
return (
<div>
<h2>Hello World</h2>
</div>
)
}
ReactDOM.render(<HelloApp />, document.querySelector("#app"))
Solution 2 - Javascript
this.renderPosts()
will return a Promise
not the actual data, and AFAIK Reactjs will not resolve Promises implicitly in render
.
You need to do it like this
componentDidMount() {
this.renderPosts();
}
renderPosts = async() => {
try {
const res = await axios.get('/posts');
const posts = res.data;
// this will re render the view with new data
this.setState({
Posts: posts
});
} catch (err) {
console.log(err);
}
}
render() {
const posts = this.state.Posts?.map((post, i) => (
<li key={i} className="list-group-item">{post.text}</li>
));
return (
<div>
<ul className="list-group list-group-flush">
{posts}
</ul>
</div>
);
}
Solution 3 - Javascript
Using React Hooks:
UPDATE 2020-08-01: Amended with @ajrussellaudio's suggestion.
import React, {useState, useEffect} from "react"
const ShowPosts = () => {
const [posts, setPosts] = useState([]);
useEffect( () => {
async function fetchData() {
try {
const res = await axios.get('/posts');
setPosts(res.data);
} catch (err) {
console.log(err);
}
}
fetchData();
}, []);
return <div>{posts}</div>
}
Solution 4 - Javascript
Poor me
For anyone using jest test
And trying to call a function children then received this Error
please check:
const children = jest.fn().mockReturnValueOnce(null)
NOT
const children = jest.fn().mockRejectedValue(null);
Solution 5 - Javascript
If you use Next.js you can use this:
Put your codes in {}, if you have some connection or some calculations thats need time, add await
to your codes in {}.
import { useEffect } from 'react'
useEffect(async () => {.......},[])