React setState doesn't update boolean variable

Question

I created a state variable using

const [drawing, setDrawing] = useState(false)

Then I've this button which should update the value of drawing

 <button onClick={() => toggleDrawing}>Toggle Drawing</button>

The toggleDrawing function is:

const toggleDrawing = () => {
    setDrawing(true)
  }

but when I press the button and console.log the value of drawing id doesn't update, it's always a step behind. it start with a value of false, after one click it remains false and after the second click it switches to true.

Where is `console.log` in your code? `setDrawing` runs asynchronously maybe that is why the state doesn't update — dcangulo, May 15 '21 at 08:07
Your onClick returns the function instead of calling it. Either pass the function itself instead of the anonymous arrow function, or call the function instead of/when returning. — JBallin, May 15 '21 at 08:07

PixAff · Answer 1 · 2021-05-15T08:15:13.553

1

const toggleDrawing = () => {
    setDrawing((oldValue) => !oldValue)
  }

if you want to toggle state in React you always want to refer to the previous state

edited May 15 '21 at 08:15

answered May 15 '21 at 08:09

PixAff

309
4
14

Arihant Jain · Accepted Answer · 2021-05-15T08:32:29.290

0

const [drawing, setDrawing] = useState(false)

Case:1 If you want a toggle true=>false and false=>true

const toggleDrawing = () => {
    setDrawing(!drawing);
  }

<button onClick={toggleDrawing}>Toggle Drawing</button>

Case:2 If you just want to set it to true

 const toggleDrawing = () => {
    setDrawing(true);
  }

<button onClick={toggleDrawing}>Toggle Drawing</button>

Sandbox https://codesandbox.io/s/vigilant-meadow-thdni?file=/src/App.js

Note => console.log(drawing) in toggleDrawing function will return false at first then true reason is state is not updated

edited May 15 '21 at 08:32

answered May 15 '21 at 08:11

Arihant Jain

817
5
17

I did the same thing you explained, but it is not solved. here is my full code: https://codesandbox.io/embed/misty-night-dm66l?fontsize=14&hidenavigation=1&theme=dark – May 15 '21 at 08:28
You cannot console.log in the toggleDrawing function react state is not updated if you call console.log outside of it will show true – Arihant Jain May 15 '21 at 08:30
I need to access the drawing variable and do something with it inside the function with the new updated value. – May 15 '21 at 08:37
you can use useEffect for it – Arihant Jain May 15 '21 at 08:39
i will attach it in sanbox wait a minute – Arihant Jain May 15 '21 at 08:40
@AymanTarig https://codesandbox.io/s/vigilant-meadow-thdni?file=/src/App.js – Arihant Jain May 15 '21 at 08:43

score 0 · Answer 3 · answered May 15 '21 at 08:11

0

The Problem

You're just returning the toggleDrawing function without executing it

Solution

Execute the function when the click event occurs like this

<button onClick={() => toggleDrawing()}>Toggle Drawing</button>

Or pass the toggleDrawing to onClick as the actual function like

<button onClick={toggleDrawing}>Toggle Drawing</button>