When I asynchronize a function I get the error: Objects are not valid as a child of React (found: [Promise object]). #71918
Replies: 2 comments
-
Problem Solution approach const Reviews = ({ element }) => {
const [reviews, setReviews] = useState([]);
useEffect(() => {
getReviews(element).then(data => setReviews(data));
}, [element]);
if (!reviews) {
return <p>Cargando...</p>;
}
// Acá tocaría renderizar componente con los datos
return <div>...</div>;
}; Then, the renderComponents function would look something like this: function renderComponents(element) {
const type = element.sys?.contentType?.sys?.id || null;
if (type) {
switch (type) {
...
case "reviews":
return <Reviews element={element} />;
... |
Beta Was this translation helpful? Give feedback.
-
GitHub's Acceptable Use Policies prohibits coordinated or inauthentic activity like rapid questions and answers. As a result, we'll be unmarking the answer and locking this post. Please note any future violations may result in a temporary or indefinite block from the Community. Thanks for understanding. |
Beta Was this translation helpful? Give feedback.
-
Body
I have a component that receives an array with objects. These objects can have a type and depending on this, they should render different components.
It happens to me that the type: reviews needs to make some checks and depending on these, calls to different APIs.
Then as I have to work with asynchronous data, I need the function to be asynchronous. I want to be able to make, inside my renderComponents function, in the case "reviews": of the switch, a const data = await getReviews(element); and for this I need the renderComponents function to be asynchronous.
The issue is that when I add async I get the error:
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 get the error even commenting the case "reviews", when I add the word async to the function. If I remove the word async everything works fine.
I tried doing this type of function and also arrow functions, but the error persists.
EDIT
One thing that happens to me, that I don't understand but maybe it can be useful for someone to notice, is that if I uncomment this block
Without making the renderComponents function asynchronous, and placing a console.log in the getReviews() function, when the page is loaded, first prints the console.log(data) with Promise {} and then prints the getReviews console showing the correct data.
Guidelines
Beta Was this translation helpful? Give feedback.
All reactions