title: How to use spread operator for nested objects in react?
body: <p>I am a newbie to React and stuck in structuring the object spread code in the reducer. The state is being stored as</p>
  <pre><code>{
    user: name,
    userAuth: null,
    errors: error,
    quizScores: [
      {
        quizId: 1,
        questionId: 12345,
        selectedOption: optionTwo,
        result: true,
      },
      {
        quizId: 2,
        questionId: 12345,
        selectedOption: optionTwo,
        result: true,
      }
    ]
  }
  </code></pre>
  <p>Upon dispatch I want to update the State to append the object (below) to the other objects lying in 'quizScores'</p>
  <pre><code>{
    quizId: 2,
    questionId: 12345,
    selectedOption: optionTwo,
    result: true,
  }
  </code></pre>
  <p>What I am trying is:</p>
  <pre><code>case ADD_SCORE:
      return {
        ...state,
        quizScores:{...state[quizScores],action.payload}
      };
  </code></pre>
  <p>Would be glad to get a little insight on how to use the spread operator to copy the previous objects and how to append the new one to it. If you think, I can use a better structure to store the data, I would be grateful to learn that as well. My goal is to simply continue to add all questionwise performance to be stored in the state.
  Thanks!!</p>
  <p>I am using useState hook to create quizScores data in a functional component and triggering a function call (handleQuizScore) to below :</p>
  <pre><code>  const handleQuizScore = (questionData) =&gt; {
      dispatch({
        type: ADD_SCORE,
        payload: questionData,
      });
    };
  </code></pre>
  <p>Here is the entire reducer function that handles the state:</p>
  <pre><code>const authReducer = (state, action) =&gt; {
    switch (action.type) {
      case SUCCESS_REGISTER:
      case FAIL_REGISTER:
        return {
          ...state,
          userAuth: null,
          errors: action.payload,
        };
      case SUCCESS_LOGIN:
        localStorage.removeItem(&quot;token&quot;);
        localStorage.setItem(&quot;token&quot;, action.payload.token);
        console.log(action.payload.token);
        return {
          ...state,
          userAuth: true,
          errors: null,
        };
      case FAIL_LOGIN:
        return {
          ...state,
          userAuth: null,
          errors: action.payload,
        };
      case SET_ERROR:
        return {
          ...state,
          errors: action.payload,
        };
      case CLEAR_ERROR:
        return {
          ...state,
          errors: null,
        };
      case SET_USER:
        return {
          ...state,
          user: action.payload,
          userAuth: true,
          errors: null,
        };
      case AUTH_ERROR:
        return {
          ...state,
          errors: action.payload,
          userAuth: null,
        };
      case LOG_OUT:
        localStorage.removeItem(&quot;token&quot;);
        return {
          ...state,
          userAuth: null,
          errors: action.payload,
        };
      case ADD_SCORE:
        return {
          ...state,
          quizScores: [...state.quizScores, action.payload],
        };
      default:
        return state;
    }
  };
  </code></pre>
  <p>The functional component in which useState is used:</p>
  <pre><code>const QuizQuestion = (props) =&gt; {
    const { clearError, userAuth, user, handleQuizScore } = useContext(
      AuthContext
    );
    let [questionData, handleQuizQuestion] = useState({
      selectedOption: &quot;&quot;,
      result: &quot;&quot;,
      quiz: &quot;&quot;,
      questionId: &quot;&quot;,
    });
  
    let { selectedOption, result, quiz, questionId } = questionData;
    const { question, toggleIsAnswered, quizId } = props;
  
    const handleOptionChange = (e) =&gt; {
      const { value } = e.target;
      console.log(question.answer);
      handleQuizQuestion({
        ...questionData,
        quiz: quizId,
        questionId: question._id,
        selectedOption: value,
      });
    };
  
    const resultCheck = (questionData) =&gt; {
      let flag = selectedOption === question.answer ? &quot;true&quot; : &quot;false&quot;;
      handleQuizQuestion({
        ...questionData,
        result: flag,
      });
    };
    const handleVote = async (e) =&gt; {
      e.preventDefault();
      resultCheck(questionData);
      console.log(&quot;handleQuizQuestion&quot;, questionData);
      await handleQuizScore(questionData);
      toggleIsAnswered();
    };
  </code></pre>
  <p>return ( and so on)</p>