title: Using usetState in ReactJs with different values
body: <p>This is an extension to my previous post: <a href="https://stackoverflow.com/questions/68277574/using-usestate-react-hooks-and-calling-other-functions/">Using useState React hooks and calling other functions</a></p>
  <p>In my code, I have several fields like firstName, lastName, age, gender, city, state, country, etc. So the approach which I am following now is lithe this:</p>
  <pre><code>function MyApp() {
      const [firstName, setFirstName] = React.useState(&quot;&quot;);
      const [lastName, setLastName] = React.useState(&quot;&quot;);
      const [city, setCity] = React.useState(&quot;&quot;);
      const [gender, setGender] = React.useState(&quot;&quot;);
      const [age, setAge] = React.useState(10);
      const [completion, setCompletion] = useState(0);
      
      calculateProgress = (firstName, lastName, city, gender, age) =&gt; {
          let total = 0;
          if(firstName.length &gt;0 ) total += 50;
          if(lastName.length &gt;0 ) total += 50;
          if(city.length &gt;0 ) total += 50;
          if(gender.length &gt;0 ) total += 50;
          if(age &gt;0 ) total += 50;
          
          setCompletion(total);
      }
  
      return {
          &lt;div&gt;
              &lt;input id=&quot;firstName&quot; onChange={(e) =&gt; setFirstName(e.target.value); calculateProgress(e.target.value, lastName, city, gender, age);}
              &lt;input id=&quot;lastName&quot; onChange={(e) =&gt; setLastName(e.target.value); calculateProgress(firstName, e.target.value, city, gender, age);}
              &lt;input id=&quot;city&quot; onChange={(e) =&gt; setCity(e.target.value); calculateProgress(firstName, lastName, e.target.value, gender, age);}
              &lt;input id=&quot;gender&quot; onChange={(e) =&gt; setGender(e.target.value); calculateProgress(firstName, lastName, city, e.target.value, age);}
              &lt;input id=&quot;age&quot; onChange={(e) =&gt; setAge(e.target.value); calculateProgress(firstName, lastName, city, gender, e.target.value);}
          &lt;/div&gt;
      }
  }
  </code></pre>
  <p>I want to optimize this code, I have declared so many variables like firstName, lastName, gender and also I have to pass multiple values for each calculateProgress function call. What is the correct way to avoid this.</p>