setState doesn't get updated the first time in react

Question

I have two components and I want to set new value to state from child component when button is clicked, so I have the following

// parent component 

const [clickedSubmit, setClickedSubmit] = useState(false);
const [state, setState] = useState({
   ..,
   val: '',
})

  function handleOnSubmit(e) {
    e.preventDefault();

    setClickedSubmit(true);

    console.log(state);
  }

// child component 

..
useEffect(() => {
  if (clickedSubmit) {
   setState({
        ...state,
        val: sigRef.current.getTrimmedCanvas().toDataURL("image/png"),
      });
     }
}, [clickedSubmit])

state.val is empty when I first click the button and only show value after first time, when I console.log outside of handleOnSubmit function, it logs two time which first time is empty and second has value. Why is that happening and how can I only get the state which has updated value inside handleOnSubmit function ?

I feel like there is a typo on this line: const [state, setState] = useState({ .., val: '' }) What is the value you are trying to initialise here? — nishkaush
– nishkaush, Commented Oct 25, 2020 at 8:12
Empty string as initialised value for val, when user click submit btn, I am trying to change value of val by calling setState from child component by changing clickedSubmit to true but state is not updating immediately in handleOnSubmit function. — Kaung Khant Zaw
– Kaung Khant Zaw, Commented Oct 25, 2020 at 8:26

Yoel · Accepted Answer · 2020-10-25 08:30:22Z

1

Because the change of state is asynchronous Therefore you will not be able to check the state of the state immediately

You can follow it with the useEffect function

like this

useEffect(()=>{
    console.log("useEffect state",state)
},[staet])

answered Oct 25, 2020 at 8:30

Yoel

8,0156 gold badges32 silver badges64 bronze badges

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

2 Comments

Kaung Khant Zaw Over a year ago

Yes, I see value in useEffect function, but I can't find a way to get only the updated value using useEffect and pass to handleOnSubmit function. Now, I made another button to save that value and then another button to save the final values and it works.

Yoel Over a year ago

@KaungKhantZaw 👍🏽

Collectives™ on Stack Overflow

setState doesn't get updated the first time in react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related