const IMETrainer = (props) => {
// ROOT STATES
const [firstString, setFirstString] = useState(true);
const [secondString, setSecondString] = useState(true);
const [thirdString, setThirdString] = useState(true);
const [fourthString, setFourthString] = useState(true);
const [fifthString, setFifthString] = useState(true);
const [sixthString, setSixthString] = useState(true);
// ROOT HANDLERS
const firstStringHandler = () => {
setFirstString(!firstString);
updateRoots();
}
const secondStringHandler = () => {
setSecondString(!secondString);
updateRoots();
}
const thirdStringHandler = () => {
setThirdString(!thirdString);
updateRoots();
}
const fourthStringHandler = () => {
setFourthString(!fourthString);
updateRoots();
}
const fifthStringHandler = () => {
setFifthString(!fifthString);
updateRoots();
}
const sixthStringHandler = () => {
setSixthString(!sixthString);
updateRoots();
}
const updateRoots = () => {
var selectedRoots = [];
if (firstString == true) {
selectedRoots.push(1);
}
if (secondString == true) {
selectedRoots.push(2);
}
if (thirdString == true) {
selectedRoots.push(3);
}
if (fourthString == true) {
selectedRoots.push(4);
}
if (fifthString == true) {
selectedRoots.push(5);
}
if (sixthString == true) {
selectedRoots.push(6);
}
console.log(selectedRoots);
setRoots(selectedRoots);
}
// SELECTED OPTIONS
const [roots, setRoots] = useState([1,2,3,4,5,6]);
No matter what I try I cannot get state to update the ‘roots’ array correctly. I keep getting weird behaviors. I know that state is updating correctly when I toggle the 1-6 buttons, but what am I doing wrong here?
I am expecting to see ‘1’ removed from the array. Clicking the option button toggles each state between true & false.
I’m still unable to figure this out after troubleshooting for several hours.
2
Answers
using useEffect in the above way solved the issue - the updateRoots function works perfectly now
I am not sure but I think it has something to do with internal React optimizations. Try (You can run the following snippet to see it effect) =>