title: combining useState hook in a react component
body: <p>I recently started using react hooks a lot.</p>
  
  <p>State management seems more intuitive to me when using "React.useState".</p>
  
  <p>Anyway, while it's working ok, I know it's starting to look cluttered the more values I am starting to save to state.</p>
  
  <p>For example, as my car parts app has progressed, it is now looking like this:</p>
  
  <pre><code>const [isShown, setIsShown] = React.useState(false);
  const [idVal, setIdValue] = React.useState(false);
  const [partNameVal, setPartNameValue] = React.useState(false);
  const [engineEngineEngineTypeVal, setEngineEngineTypeValue] = React.useState(false);
  const [displacementVal, setDisplacementValue] = React.useState(false);
  const [makeVal, setMakeValue] = React.useState(false);
  const [countryVal, setCountryValue] = React.useState(false);
  
  const hide = () =&gt; setIsShown(false);
  
  const show = (id, partName, engineEngineType, displacement, department, country) =&gt; {
      setIsShown(true);
      setIdValue(id);
      setPartNameValue(partName);
      setEngineTypeValue(engineEngineType);
      setDisplacementValue(displacement);
      setMakeValue(department);
      setCountryValue(country);
  }
  
  &lt;p&gt;ID:  {idVal}&lt;/p&gt;
  &lt;p&gt;PartName:  {partNameVal}&lt;/p&gt;
  &lt;p&gt;EngineType:  {engineEngineTypeVal}&lt;/p&gt;
  &lt;p&gt;Displacement:  {displacementVal}&lt;/p&gt;
  &lt;p&gt;Make:  {makeVal}&lt;/p&gt;
  &lt;p&gt;Country:  {countryVal}&lt;/p&gt;
  </code></pre>
  
  <p>I was wondering if there's a way to make this more readable, but still be very intuitive.</p>
  
  <p>Thanks!</p>