title: Why only 1 function out of two gets executed in onClick event
body: <p>I am building a simple react app that is meant to pass several functions responsible to update the same state object in the parent component, but for some reason, only one of two functions gets executed when triggered by an onClick event in a children component or at least so it seems, let me show you some code:</p>
  <p>Children component:</p>
  <pre><code>        &lt;button id='but2' onClick={()=&gt;{
          props.isBeginner(true); 
          props.nextStep(2)
          }} 
          className={classes.chooseButton} &gt;Choice number 1&lt;/button&gt;
  </code></pre>
  <p>Parent component functions:</p>
  <pre><code>isBeginner(b){
  setUser({...user,first_timer:b})}
  
  nextStep =(step)=&gt;{
  setUser({...user,setup_step:step})}
  </code></pre>
  <p>Between the children and the parent components, there is a middle component responsible to sort the right child component to render, it does that through
  a switch operator:</p>
  <pre><code>switch(step){
      
      
      case 1 :{return &lt;StepOne user={props.user} nextStep={props.nextStep} 
      isBeginner={props.isBeginner} /&gt;};
      break;
      case 2 :{return &lt;StepTwo whatMedium={props.whatMedium} user= 
      {props.user}  nextStep={props.nextStep}/&gt;}  
      break;
      case 3 :{return &lt;StepThree user={props.user} nextStep= 
      {props.nextStep}/&gt;}  
      break;
      case 4 :{return &lt;StepFourth nextStep={props.nextStep}/&gt;}  
      break;
  
      default:{&lt;StepOne isBeginner={props.isBeginner} nextStep={ 
      props.nextStep}/&gt;}
  
      }
  </code></pre>
  <p>Why can't I update the state of the parent component using two different functions (passed down to children components) to update different values of the same (state) object?</p>