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() } } />}
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])