React State Shows False When True Is Expected

Question

Very simple goal. When a checkbox is clicked set the state of itemOne to true initially. Then it should toggle state if clicked again. When itemOneSelected is invoked itemOne is shown as false.

The question: Why is itemOne set to false instead of true when itemOneSelected is invoked?

      const [itemOne, setItemOne] = useState(false);
      const itemOneSelected = () => {
      setItemOne(!itemOne)
      console.log(itemOne)
      }

    
      <FormControlLabel control={<Checkbox onClick => { itemOneSelected() } } />}

score 1 · Accepted Answer · answered Apr 22 '22 at 14:19

1

Remember useState is asynchronous so it will not update straight away. To get the console.log value to log your value you should add a useEffect.

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

answered Apr 22 '22 at 14:19

Matt

791
4
13

React State Shows False When True Is Expected

1 Answers1