React - Checkbox returning undefined value on first time

Question

I have a functional component and I'm trying to get the value from a checkbox input, but even if I set a initial state the first value that I get from the console is undefined. It only starts to retrieve the value from the state after I click a second time.

const Preferences = () => {

    const [pref, setPref] = useState({
        webcam: true
    });


    const onChange = e => {

        setPref({ ...pref, [e.target.name]: e.target.checked });

        console.log(webcam); //always undefined on first time
    };

...

<input
    type="checkbox"
    name="webcam"
    value={webcam}
    onChange={onChange}
    defaultChecked={webcam}
/>

Wouldn't you be accessing your webcam value from pref.webcam? — Chris
– Chris, Commented Jul 29, 2020 at 0:32

Drew Reese · Accepted Answer · 2020-07-29 01:25:32Z

4

It's undefined the first time because your state is named perf with a property webcam.

Correctly access your state properties when passing values as props.

<input
    type="checkbox"
    name="webcam"
    value={perf.webcam}
    onChange={onChange}
    defaultChecked={perf.webcam}
/>

Also, trying to console log state directly after queueing up an update doesn't work as react state updates are asynchronous in nature and occur between render cycles, i.e. it simply logs the state value from the current render cycle. Use an effect to log the updated state values.

Additionally, due to the asynchronous nature of react state updates and nullable synthetic events, you'll likely want to grab the event's name and checked value so the event isn't nullified and returned to the event pool before the state update is processed.

const Preferences = () => {

    const [pref, setPref] = useState({
        webcam: true
    });

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

    const onChange = e => {
        const { checked, name } = e.target;
        setPref({ ...pref, [name]: checked });
    };

...

edited Jul 29, 2020 at 1:25

answered Jul 29, 2020 at 0:46

Drew Reese

207k20 gold badges282 silver badges293 bronze badges

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

1 Comment

BrianLegg Over a year ago

After an hour of searching, your suggestion to pull out checked and name before calling setPref... that solved my issue. Great suggestion.

Collectives™ on Stack Overflow

React - Checkbox returning undefined value on first time

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related