As part of my learning process into creating hooks and reducer functions Im trying to build a small quiz based application. And my issue is as follows.

I have managed to get the data I want into my api call hook, this is passed in as a destructured object, and I can now get my data back from said hook. I then retention purposes and passing it down as a prop, want to save this to a new piece of state.

My problem is as follows:

The data I get back comes back in the form of an array of objects and as a result I cannot seem to update the state.

export default function App() {
  // Params State
  const [params, setParams] = useState();
  // Question state
  const [questions, setQuestions] = useState({});
  // Start Game State
  const [start, setStart] = useState(false);

  // destucture reducer hook here
  const { reducerState, actions } = useQuestionData();
  // destructure trivia hook here
  const { questionData, isLoading, error } = useTrivia(params);

  // set start handler
  function handleSetStart() {
    setParams(reducerState);

    setQuestions(questionData);

    setStart(!start);
  }

  // getting question DATA
  console.log(questionData);
  // Becomes undefined here // need to spread data into objects
  console.log(questions);
  return (
    <div>
      <Header />
      <Debug reducerState={reducerState} start={start} />
      {!start ? (
        <GetQuestionData
          actions={actions}
          setStart={setStart}
          start={start}
          handleSetStart={handleSetStart}
        />
      ) : (
        <Main params={params} questionData={questionData} />
      )}
    </div>
  );
}

On “getting question data” i get my array of objects but then when I want to update my state it always comes back as undefined. It just won’t update. I feel im supposed to use MAP here but I can’t find a specific use case similar enough to what id like to do, so any pointers would be appreciated.

What I tried:

I tried looping over the array of objects to individually add them to the state, I have tried adding them to a new piece of state that has an array as it’s base and i’ve tried mapping the array, which I thought would be correct but seems not to be the case