why is my setstate function is not working for the first call?

Question

there is a food function with props that is type which is equal to 'Lunch' or 'Dinner' I need to change the value of LunchStatus when submit is clicked according to the condition on type

const Food = (props) =>{
  const [LunchStatus, LunchUpdate] = useState('Lunch YES');
  const [DinnerStatus, DinnerUpdate] = useState('Dinner YES');
  
  function handlingSubmit(e){
    if(props.type === 'Lunch'){
      LunchUpdate('Lunch NO');
      console.log(LunchStatus);
    }
    else{
      DinnerUpdate('Dinner NO');
      console.log(DinnerStatus);
    }
  }
  return (
    <div className='food-box'>
      <button  class="button_raise" onClick={handlingSubmit}>Submit</button>
    </div>
  );
}

and output is showing Lunch YES and Dinner YES for first clicks and Lunch NO and Dinner NO for remaining clicks

the output is like when I click both one after one continuously is

Lunch YES
Dinner YES
Lunch NO
Dinner NO
Lunch NO
Dinner NO

Does this answer your question? [Console.log() after setState() doesn't return the updated state](https://stackoverflow.com/questions/54713510/console-log-after-setstate-doesnt-return-the-updated-state) — pilchard, Mar 21 '21 at 13:31

Parth Tagadiya · Accepted Answer · 2021-03-21T13:46:30.123

There are a couple of reasons for this behavior:

: State is updated asynchronously.
: In any particular render, state and props don't change, changes are only reflected when the component re-renders.

const Food = (props) => {
  const [LunchStatus, LunchUpdate] = useState('Lunch YES');
  const [DinnerStatus, DinnerUpdate] = useState('Dinner YES');

  useEffect(() => {
    console.log(LunchStatus);
  }, [LunchStatus])

  useEffect(() => {
    console.log(DinnerStatus);
  }, [DinnerStatus])

  function handlingSubmit(e) {
    if (props.type === 'Lunch') {
      LunchUpdate('Lunch NO');
    }
    else {
      DinnerUpdate('Dinner NO');
    }
  }
  return (
    <div className='food-box'>
      <button class="button_raise" onClick={handlingSubmit}>Submit</button>
    </div>
  );
}

from where did the useEffect come from? – HEMANTH KUMAR Mar 22 '21 at 15:32 — HEMANTH KUMAR, Mar 22 '21 at 15:32
`import { useEffect } from 'react';` – Parth Tagadiya Mar 23 '21 at 04:24 — Parth Tagadiya, Mar 23 '21 at 04:24

score 0 · Answer 2 · answered Mar 21 '21 at 13:45

Your status was updated.

Just you are not seeing because the state is applied after that.

    <div className='food-box'>
      <p>Lanch state: {{LunchStatus}}</>
      <p>Lanch state: {{DinnerStatus}}</>
      <button  class="button_raise" onClick={handlingSubmit}>Submit</button>
    </div>

or

const Food = (props) =>{
  const [LunchStatus, LunchUpdate] = useState('Lunch YES');
  const [DinnerStatus, DinnerUpdate] = useState('Dinner YES');
  
  function handlingSubmit(e){
    if(props.type === 'Lunch'){
      LunchUpdate('Lunch NO');
      
    }
    else{
      DinnerUpdate('Dinner NO');
     
    }
  }
  console.log(LunchStatus);
  console.log(DinnerStatus);
  return (
    <div className='food-box'>
      <button  class="button_raise" onClick={handlingSubmit}>Submit</button>
    </div>
  );
}

score 0 · Answer 3 · answered Mar 21 '21 at 13:49

0

Because you are not updating YES at any click, you are only updating NO . Only time it is printing YES is when its initialized with useState('Dinner YES')

answered Mar 21 '21 at 13:49

Palash Shrivastava

77
6

but it is printing YES for the first click and not when the page loaded also for the rest of the clicks it is updating as NO – HEMANTH KUMAR Mar 22 '21 at 15:34

why is my setstate function is not working for the first call?

3 Answers3