title: Better way of handling form data via React useState()?
body: <p>Just wondering if anyone has a better solution to stop repetitiveness in my code?  I currently am using <code>useState()</code> to handle user data and it's fairly repetitive as there are loads of different fields.  Here is my code below:</p>
  <pre><code>const [lname, setLast] = useState&lt;string&gt;(&quot;&quot;);
  const [country, setCountry] = useState&lt;string&gt;(&quot;&quot;);
  const [phone, setPhone] = useState&lt;string&gt;(&quot;&quot;);
  const [email, setUsername] = useState&lt;string&gt;(&quot;&quot;);
  const [username, setEmail] = useState&lt;string&gt;(&quot;&quot;);
  const [password, setPassword] = useState&lt;string&gt;(&quot;&quot;);
  const [cpassword, setCPassword] = useState&lt;string&gt;(&quot;&quot;);
  </code></pre>
  <p>The Form itself (summarized):</p>
  <pre><code>&lt;IonItem&gt;
      &lt;IonLabel position={&quot;stacked&quot;}&gt;First Name&lt;/IonLabel&gt;
      &lt;IonInput type={&quot;text&quot;} value={fname} placeholder=&quot;Enter Your First Name&quot; onIonChange={(event) =&gt; setFirst(event.detail.value ?? '')}/&gt;
  &lt;/IonItem&gt;
  </code></pre>
  <p>I saw before in another post you could use an interface, but I am unsure how I could implement it with the <code>useState()</code> or if it would be the best approach for my code as I am then passing the data to an Axios POST request to the backend to be processed</p>
  <pre><code>    const handleRegistration = async () =&gt; {
          await axios.post('http://localhost:3000/register', {
              fname: fname,
              lname: lname,
              country: country,
              phone: phone,
              email: email,
              username: username,
              password: password,
              cpassword: cpassword
          }).then(res =&gt; {
              console.log(res);
              onRegister();
          }).catch(err =&gt; {
              console.log(err);
          });
      }
  </code></pre>