title: How to get user input as a nested object?
body: <p>I have a form which consists from several input blocks. The blocks are the same (I mean they all have the same fields set). Each block has an input field name.</p>
  <p>On Submit I want to get an object like this:</p>
  <pre><code>const resultInput = {
      block1: {
          name: ''
      },
      block2: {
          name: ''
      }
  }
  </code></pre>
  <p>I can achieve that with multiple states and on submit combine them into the result object like this:</p>
  <pre><code>  const [firstBlockInput, setFirstBlockInput] = useState({});
    const [secondBlockInput, setSecondBlockInput] = useState({});
  
    const handleChangeFirstBlock = (e) =&gt; {
      const { name, value } = e.target;
  
      setFirstBlockInput((prev) =&gt; ({
        ...prev,
        [name]: value,
      }));
    };
  
  
    const handleChangeSecondBlock = (e) =&gt; {
      const { name, value } = e.target;
  
      setSecondBlockInput((prev) =&gt; ({
        ...prev,
        [name]: value,
      }));
    };
  
    const handleSubmit = () =&gt; {
      const result = {
        block1: firstBlockInput,
        block2: secondBlockInput,
      };
  
      console.log(result);
    };
  </code></pre>
  <p>Also I have to pass these states and onChanges functions down to child form like this:</p>
  <pre><code>  &lt;SomeForm
      onClose={closeForm}
      onChangeBlock1={handleChangeFirstBlock}
      onChangeBlock2={handleChangeFirstBlock}
      firstBlockInputValue={firstBlockInput}
      secondBlockInputValue={secondBlockInput}
      onSubmit={handleSubmit}
    /&gt;
  </code></pre>
  <p>And here's my question. Is there a simple and clean approach to do the same but without extra states and functions (like <code>handleChange</code> for each input)? Example above is simplified...actually I have three blocks and each has three input fields.</p>