How to toggle checkbox value in React Hooks?

Question

I have an input type checkbox as follow:

const [is_checked,set_is_checked]= useState(false);

const toggle_payment = () => {
    set_is_checked(!is_checked);
    console.log(is_checked);
}


return(
    <div>
        <input checked={is_checked}  onChange={toggle_value} type="checkbox"/>
    </div>
)

The problem

This seems to work fine, But when I console.log(is_checked) it looks like it prints the previous value. I tried both onChange and onClick but got the same result. What confuses me is that the checkbox is getting checked / unchecked each time I click on the box, but the console.log prints different value than what expected to print, like when I check the box with the mouse click, the box got checked but the console.log prints false

William Scalabre · Accepted Answer · 2020-04-25 23:42:38Z

4

the state update using the updater provided by useState hook is asynchronous, and will not immediately reflect and update but will trigger a re-render

i think that if you console.log() outside the function you might gonna see the changes of the is_checked

answered Apr 25, 2020 at 23:42

William Scalabre

6635 silver badges14 bronze badges

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

2 Comments

William Scalabre Over a year ago

you can check this stackblitz i created: stackblitz.com/edit/react-7jckhn you'll see that if you console.log() the value outside the value is correct "outside Toggle Payment"

William Scalabre Over a year ago

you could also do something like this stackblitz.com/edit/react-jchkmr and put the logic inside the useEffect()

Matt Huggins · Accepted Answer · 2020-04-25 23:41:28Z

1

This is due to the way state management works in React. A call to a state setter function (in this case set_is_checked) will update the value, but that updated value is available on the next render. When you call console.log below set_is_checked, you are still referencing the old value prior to the state being set.

answered Apr 25, 2020 at 23:41

Matt Huggins

83.7k37 gold badges153 silver badges220 bronze badges

Collectives™ on Stack Overflow

How to toggle checkbox value in React Hooks?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related