title: Handling input change depending on the number of key value pairs
body: <p>Suppose we have this form right here full of key values pairs (i.e. in this case) </p>
  
  <pre><code>const data = {
    maxPosts: 9999999,
    key: "value"
  };
  </code></pre>
  
  <p>However there can be more key-value pairs and hence more inputs in the picture below.</p>
  
  <p>What is a good way of handling the input change depending on the data given? Because I cannot hardcode all the input handlers like such (as the inputs are dependent on the KV Pairs):</p>
  
  <pre><code>
        changeKey1: function (event) {
          // change state
        },
        changeVal1: function (event) {
          // Change State
        },
        changeKey2: function (event) {
          // Change State
        },
  
  </code></pre>
  
  <p>Ultimately the user will be editing these values and then press submit to confirm their edit changes. Is there anyway of doing this with React Hooks? </p>
  
  <p><a href="https://i.stack.imgur.com/V32eF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V32eF.png" alt="enter image description here"></a></p>