score:2

Accepted answer

you might have misunderstood with the infinite loop error

it's actually a render error as being shown here:

to fix your render error, simply put an actual string variable in the {}

because the response was an array of this object, so you can't simply render the whole object but need to pick an actual string variable inside:

[{
   "userid": 1,
   "id": 1,
   "title": "delectus aut autem",
   "completed": false
}],

change to something like this:

const showdata = ({ userdata }) => {
  console.log("here", userdata);
  return (
    <>
      {userdata.map((info, idx) => (
        <div classname="user-data" key={idx}>
          {info.title}  // <-- put a title here.
        </div>
      ))}
    </>
  );
};

score:-2

remove

useeffect(() => {
    console.log(userdata);
},[userdata]) 

this will reevaluate component whenever user data changes, which leeds to call showdata infinitely


Related Query

More Query from same tag