React setState not pushing value FIRST TIME ONLY

Question

Noob question on the way... :(

Working with multiple checkbox and setting state is never getting first value event though value is there.

Console

As show above "value" is being printed on selection.

code

function onChange (e: any) {
        const isChecked = e.target.checked
        const value = e.target.value
        console.log('bool', isChecked, value)
        if(isChecked) {
            console.log('inside val', value)
            setChosenSpeciality([...chosenSpeciality, value])

            console.log('added array', chosenSpeciality)
            filterBySpecialty(chosenSpeciality)
        } else {
            setChosenSpeciality(chosenSpeciality.filter(item => item !== value))
            filterBySpecialty(chosenSpeciality)

            console.log('rest from remove', chosenSpeciality)
        }
    }

<CheckboxContainer>
            {
                   specialties.map((specialty, index) => (
                    <label>  
                        <Checkbox  
                            type="checkbox"
                            name={specialty}
                            value={specialty} 
                            key={index}
                            onClick={onChange}
                        />  
                        {specialty}
                    </label>
                   ))
            }
            </CheckboxContainer>

Thanks for any help, have a good one!

Is your issue that you are expecting `chosenSpeciality` to include the new value here: `console.log('added array', chosenSpeciality)` — Samuel Goldenbaum, Sep 22 '21 at 18:59
Setting the state is an asynchronous thing. It queues the state update. If you're expecting it to immediately update before a re-render, that wouldn't be correct. I'm not real sure what you're asking though. — Nikki9696, Sep 22 '21 at 19:02
`setState` (assuming your using `useState` hook) is async, so there's a change that the new state is correclty set but not yet at the time you call `console.log`. See this [answer](https://stackoverflow.com/questions/54867616/console-log-the-state-after-using-usestate-doesnt-return-the-current-value) — lbsn, Sep 22 '21 at 19:02
Hi everyone, The page with cheboxes is render and I want to select an item but the first selection don't update the state(showed above). If I click again it happens. — Alexandre Bonfim, Sep 22 '21 at 19:05
@SamuelGoldenbaum exactly it never includes the value the first time. In case I click again it is being added. cheers! — Alexandre Bonfim, Sep 22 '21 at 19:07

score 0 · Accepted Answer · answered Sep 22 '21 at 19:06

Your issue seems like you are expecting the state to updated immediately which is not the case–it is actually an async operation.

This form of setState() is also asynchronous, and multiple calls during the same cycle may be batched together.

Ref

Update to take this into consideration:

function onChange (e: any) {
        const isChecked = e.target.checked
        const value = e.target.value
        console.log('bool', isChecked, value)
        if(isChecked) {
            console.log('inside val', value)
            const temp = [...chosenSpeciality, value];
            setChosenSpeciality(temp)

            console.log('added array', temp)
            filterBySpecialty(temp)
        } else {
            const temp = chosenSpeciality.filter(item => item !== value);
            setChosenSpeciality(temp)
            filterBySpecialty(temp)

            console.log('rest from remove', temp)
        }
    }

Saved the day, cheers!!! – Alexandre Bonfim Sep 22 '21 at 19:13 — Alexandre Bonfim, Sep 22 '21 at 19:13

React setState not pushing value FIRST TIME ONLY

1 Answers1