title: how to update an object using useEffect in Reactjs and Typescript
body: <p>I am very new to <code>Reactjs</code> + <code>Typescript</code> and i am trying to figure out why i am getting the error below.</p>
  
  <p><code>React 16.9</code></p>
  
  <pre><code>const STEP_STATUS = {
    COMPLETED: "Completed",
    INCOMPLETE: "Incomplete",
  };
  
  const Foo = () =&gt; {
    const [state, setState] = useState({
      step: 1,
      firstName: '',
      lastName: '',
      status: STEP_STATUS["INCOMPLETE"],
    });
  
  const nextStep = () =&gt; {
      setState({...state, step: state.step + 1});
    }
  
  useEffect(() =&gt; {
      if (state.step + 1 !== state.step) {
        // setState(prev =&gt; {...prev, state.step = STEP_STATUS["COMPLETED"]}); // I tried this too
        setState(...state, state.status = STEP_STATUS["COMPLETED"]);
      } else {
        console.log("error");  // don't mind this line
      }
    }, [state]);
  </code></pre>
  
  <p>I am trying to create a <strong>side effect</strong> using <code>useEffect</code>, after pressing the button <code>nextStep</code>(which brings the user to the next page), I want to update the status of current page to "Completed" before we get to the next page.</p>
  
  <p>I might really be doing this wrong.</p>
  
  <p>Any help would be very helpful.</p>
  
  <h1>current error</h1>
  
  <pre><code>×
  TypeError: state is not iterable
    53 | useEffect(() =&gt; {
    54 |   if (state.step + 1 !== state.step) {
    55 |     // setState(prev =&gt; {...prev, state.step = STEP_STATUS["COMPLETED"]});
  &gt; 56 |     setState(...state, state.status = STEP_STATUS["COMPLETED"]);
       | ^  57 |   } else {
    58 |     console.log("error");
    59 |   }
  </code></pre>