Bug - createContext unable to pass function

[vishuRizz]

i'm calling an API and the function from main context is not being called to the API call even when i am importing it using const { ... , ..... } = createContext(....) the error is as followed

(Uncaught Error: Objects are not valid as a React child (found: object with keys {likes, dislikes}). If you meant to render a collection of children, use an array instead.)

This happens when you click on the " FETCH DATA-POST FROM API" on the home page when no posts already exist.

[decompi]

If i am not mistaken, this error message is indicating that an object with keys {likes, dislikes} is being passed as a React child. I would say just to ensure that the data fetched from the API is an array of objects that can be correctly mapped

[vishuRizz]

If i am not mistaken, this error message is indicating that an object with keys {likes, dislikes} is being passed as a React child. I would say just to ensure that the data fetched from the API is an array of objects that can be correctly mapped

can you actually fix this?, couse when i inport the addApiContex fron react contex it shows that it aint a method

[decompi]

Alright i will try to help.

1. Can you check that the API response for post.reactions has the correct format and that post.reactions is not an object when rendering.
2. In PostList.jsx can you modify it to log the API response?

   function handleApiButton() {
   fetch('https://dummyjson.com/posts')
   .then(res => res.json())
   .then(obj => {
     console.log(obj.posts);
     addApiPosts(obj.posts);
   });
   }

3. Try this to see if it works, this is the Post.jsx file

   <div className="alert alert-success reactions" role="alert">
   This post has been reacted by {post.reactions.likes + post.reactions.dislikes || post.reactions} people.
   </div>

[nabeelkirmani]

Alright i will try to help.

1. Can you check that the API response for post.reactions has the correct format and that post.reactions is not an object when rendering.
2. In PostList.jsx can you modify it to log the API response?

function handleApiButton() {
  fetch('https://dummyjson.com/posts')
    .then(res => res.json())
    .then(obj => {
      console.log(obj.posts);
      addApiPosts(obj.posts);
    });
}

3. Try this to see if it works, this is the Post.jsx file

<div className="alert alert-success reactions" role="alert">
  This post has been reacted by {post.reactions.likes + post.reactions.dislikes || post.reactions} people.
</div>

After looking at a tutorial video from previous year, I believe the "reactions" value in https://dummyjson.com/posts changed from being a single number as shown in the screenshot

to being:

"reactions": {
    "likes": 123,
    "dislikes": 456
}

Your solution worked for me, thanks!