Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – State not updating correctly when using multiple if statements

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]);

problem

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
      useEffect(() => {
    updateRoots();
}, [firstString, secondString, thirdString, fourthString, fifthString, sixthString])

    using useEffect in the above way solved the issue - the updateRoots function works perfectly now


  2. 0

    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) =>

    const {
  useState,
  useEffect
} = React;
const IMETrainer = (props) => {

const handlers = ['firstStringHandler', 'secondStringHandler', 'thirdStringHandler', 'fourthStringHandler', 'fifthStringHandler', 'sixthStringHandler']
  
  const cState = () => {}
  // ROOT STATES
  const [aString, setaString] = useState({
    firstString: true,
    secondString: true,
    thirdString: true,
    fourthString: true,
    fifthString: true,
    sixthString: true
  });

  // ROOT HANDLERS
  
  function mustt(event){
  
    let c = aString;
    switch(event.target.innerText){
    case 'firstStringHandler':
    c['firstString']= false
    setaString(c)
    updateRoots()
    break;

    case 'secondStringHandler':
    c['secondString'] = false
    setaString(c)
    updateRoots()
    break;
    
    case 'thirdStringHandler':
    c['thirdString'] = false
    setaString(c)
    updateRoots()
    break;
    
    case 'fourthStringHandler':
    c['fourthString'] = false
    setaString(c)
    updateRoots()
    break;

      case 'fifthStringHandler':
    c['fifthString'] = false
    setaString(c)
    updateRoots()
    break;

      case 'sixthStringHandler':
    c['sixthString'] = false
    setaString(c)
    updateRoots()
    break;
    }
  }

   const updateRoots = () => {
 var selectedRoots = [];
    if (aString.firstString == true) {
      selectedRoots.push(1);
    }
    if (aString.secondString == true) {
      selectedRoots.push(2);
    }
    if (aString.thirdString == true) {
      selectedRoots.push(3);
    }
    if (aString.fourthString == true) {
      selectedRoots.push(4);
    }
    if (aString.fifthString == true) {
      selectedRoots.push(5);
    }
    if (aString.sixthString == true) {
      selectedRoots.push(6);
    }
    console.clear();
    console.log(selectedRoots);
  }
  
  function Butn({name}) {
  return(
  <button onClick={(event)=> mustt(event)}> {name} </button>
  )
  }
  
  const btn = handlers.map((a)=> 
  (<Butn name={a} />))

  return ( 
  <div className = 'parent'>
    <div className = 'container'>
   {btn}
    </div>
    </div>
  )
}
ReactDOM.createRoot(document.getElementById("app")).render( <IMETrainer /> );
    .parent {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  flex-basis: 50px;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.container>button {
  margin: 5px;
  padding: 5px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<div id="app"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search