title: Using React Hooks with more than one Key/Value Pair in State Object
body: <p>I wonder what the best way is to define more than one <code>key/value</code> pair for the <code>state</code> in a <code>Functional Component</code>.</p>
  <p>In a class I would initialithe <code>State</code> like</p>
  <pre><code>this.state = {
      first: 'foo',
      second: 'bar'
  };
  </code></pre>
  <p>To update the <code>State</code> I call</p>
  <pre><code>this.setState({
      first: 'foobar',
      second: 'barfoo'
  });
  </code></pre>
  <p>Now with <code>React Hooks</code> I initialize the <code>State</code> like so.</p>
  <pre><code>const [first, setfirst] = useState('foo');
  const [second, setSecond] = useState('bar');
  </code></pre>
  <p>To update the <code>State</code> I call:</p>
  <pre><code>setFirst = 'foobar';
  setSecond = 'barfoo';
  </code></pre>
  <p>But, IMHO, that is not ideal. I have to rewrite <code>const [x, setX] = useState(...);</code> everytime I want to add a new <code>key/value</code> pair to the <code>State object</code>. Boilerplate. I further always have to keep in mind the &quot;setter&quot; name of <code>x</code>, which is <code>setX</code>. That will get messy, if the <code>State object</code> grows.</p>
  <p>It would be nicer if I could simply call</p>
  <pre><code>setState(first: 'foobar', second: 'barfoo');
  </code></pre>
  <p>But I am not sure how to initialize the <code>State object</code> properly/what is the best way to do that.</p>