How to modify data received from fetch Request in React

Question

The question is how to modify data received from fetch Request in React?

1)I get the result of a fetch request and put in into state 2)To work with the data I need to modify it (add an ID and a boolean to each item of the array inside one of the objects of the coming array.

I tried the following way, but it doesn't work:

useEffect(() => {
    fetch(
      "https://opentdb.com/api.php?amount=5&category=10&difficulty=easy&type=multiple"
    )
      .then((res) => res.json())
      .then((data) => data.map(question => ({
        ...question,
        incorrect_answers: question.incorrect_answers.map(answer => {...answer, isSelected: false})
      })));
  }, []); ```

can you post the expected result after modifying it?

gaurang
– gaurang

2023-01-23 08:48:42 +00:00
Commented Jan 23, 2023 at 8:48 — gaurang
– gaurang, Commented Jan 23, 2023 at 8:48

RubenSmn · Accepted Answer · 2023-01-23 09:07:33Z

2

Your data is a object so you can't map over it. The data object has a property results which contains the array of questions.

data.results.map((question) => ({ ... })

Then the first time you correctly surround the object you return with () but when you map over the incorrect_answers you don't.

incorrect_answers: question.incorrect_answers.map((answer) => ({
  ...answer,
  isSelected: false,
}));

Full code

useEffect(() => {
  fetch(
    "https://opentdb.com/api.php?amount=5&category=10&difficulty=easy&type=multiple"
  )
    .then((res) => res.json())
    .then((data) =>
      data.results.map((question) => ({
        ...question,
        incorrect_answers: question.incorrect_answers.map((answer) => ({
          answer,
          isSelected: false,
        })),
      }));
    );
}, []);

edited Jan 23, 2023 at 9:07

answered Jan 23, 2023 at 8:51

RubenSmn

4,7522 gold badges12 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Smith82 Over a year ago

Thanks, but inside of incorrect_answers I have a string, not an object, I need to modify the string to be the value answer of a key of a new created object.

RubenSmn Over a year ago

I updated my answer to not use the spread operator on the answer value, now incorrect_answer will be a array of object with the props answer and isSelected. Could explain what you mean by he value answer of a key of a new created object?

Smith82 Over a year ago

I mean that I need to change answer from string to object, because at the moment it's a string, maybe that's why the code isn't working...

Smith82 Over a year ago

The code's working, thanks a lot for your help. Problem solved:)

Collectives™ on Stack Overflow

How to modify data received from fetch Request in React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related