Handling input change depending on the number of key value pairs

Question

Suppose we have this form right here full of key values pairs (ie in this case)

const data = {
  maxPosts: 9999999,
  key: "value"
};

However there can be more key-value pairs and hence more inputs in the picture below.

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):

      changeKey1: function (event) {
        // change state
      },
      changeVal1: function (event) {
        // Change State
      },
      changeKey2: function (event) {
        // Change State
      },

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?

Answer 1

Yes, here is a simple example of managing N states.

const generateNValues = N => [...Array(N).keys()];

function TextAreaManager() {
  const [valuesManager, setValuesManager] = useState(generateNValues(10));
  return (
    <Flexbox>
      {valuesManager.map((value, i) => (
        <TextBoxItem
          key={i}
          value={value}
          onChange={e => {
            valuesManager[i] = e.target.value;
            setValuesManager([...valuesManager]);
          }}
        />
      ))}
      <PinkButton
        onClick={() =>
          setValuesManager([...Array(valuesManager.length).fill('')])
        }
      >
        Reset All
      </PinkButton>
    </Flexbox>
  );
}