Checkbox state not updating in React hook functional component

Question

I am facing problem while updating check box state using React hooks, By default check box is false.

Below code sample

function GPSPosition() {
   const [isEnable, setCheckBoxEnable] = useState(false)
   
   const enableStopSendingData = (e) => {
        e.preventDefault();
        setCheckBoxEnable(e.target.checked) 
        console.log(e.target.checked);// on check of CheckBox, here value is `true`

        console.log(isEnable); // true is not set to isEnable, value here is `false`
   }


   return (
                <div className="text-ellipsis">{GpsConstants.WIDGET_NAME}</div>
                    <Checkbox checked={isEnable} onChange={(checked) => enableStopSendingData(checked)} 
                  className="homepage-widget-checkbox text-ellipsis" >{HomepageConst.CHECKBOX_HEADER} 
                   </Checkbox>
                </div>
   )
}

Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer
– halfer, Commented Dec 4, 2022 at 15:06

topdev87 · Accepted Answer · 2021-02-15 10:47:15Z

1

setCheckBoxEnable is the asynchronous method so you can't get the updated value of isEnable immediately after setCheckBoxEnable().

        setCheckBoxEnable(e.target.checked) 
        console.log(isEnable); // This will show old value of `isEnable`

You should use useEffect with adding isEnable dependency to check the updated state value.

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

answered Feb 15, 2021 at 10:47

topdev87

8,7913 gold badges11 silver badges33 bronze badges

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

Comments

Sabir · Accepted Answer · 2021-02-15 11:04:12Z

1

From your code it seems checkbox should work fine, but in case you need updated value after setting in state, you could use useEffect.

    useEffect(() => {
      // Here you will get latest value
    }, [stateVeriable]);

answered Feb 15, 2021 at 11:04

Sabir

1793 bronze badges

1 Comment

Sara Over a year ago

Yes i used useEffect, it worked Thank you

Dosie · Accepted Answer · 2021-02-15 11:12:48Z

0

delete th this line: e.preventDefault();

reference Event/preventDefault

answered Feb 15, 2021 at 11:12

Dosie

764 bronze badges

1 Comment

Sara Over a year ago

Even after removing this line it does not work, the above answer from William worked

Collectives™ on Stack Overflow

Checkbox state not updating in React hook functional component

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related