Comment enregistrer l'entrée saisie par l'utilisateur dans un état qui est un tableau dans React

Attribuez à chaque entrée un attribut personnalisé, par exemple data-group = "typeA" . Dans votre fonction on change, récupérez cette valeur et ajoutez les valeurs au tableau correct.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

function formatState(json) {
  if (typeof json != 'string') {
       json = JSON.stringify(json, undefined, 2);
  }
  json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, (match) => match);
}

const Credentials = ({ value }) => {
  return <pre>{formatState(value)}</pre>;
};

class App extends React.Component {
  state = {
    groups: [
      {
        typeA: [],
        typeB: []
      }
    ],
    credentials: false
  };

  handleSubmit = event => {
    event.preventDefault();

    this.setState({
      credentials: true // display Credentials  component
    });
  };

  // get the current input index in the array typeA | typeB
  findFieldIndex = (array, name) => {
    return array.findIndex(item => item[name] !== undefined);
  };

    change = e => {

      // create a copy of  this.state.groups
      const copyGroups = JSON.parse(JSON.stringify(this.state.groups));

      // get data-group value
      const group = event.target.dataset.group;
      
      if (!copyGroups[0][group]) {
        copyGroups[0][group] = []; // add new type
      }
      
      const groups = copyGroups[0][group];
      const index = this.findFieldIndex(groups, e.target.name);

      if (index < 0) {
        // if input doesn't exists add to the array
        copyGroups[0][group] = [...groups, { [e.target.name]: e.target.value }];
      } else {
        // update the value
        copyGroups[0][group][index][e.target.name] = e.target.value;
      }

      this.setState({ groups: copyGroups });
    };
    
 removeKey = (key) => {
    const temp = {...this.state};
    delete temp[key];
    return temp;
 }

  render() {
    return (
      <div>
        <input
          type="text"
          name="col1"
          placeholder="Type A"
          data-group="typeA"
          onChange={e => this.change(e)}
        />

        <input
          type="text"
          name="col2"
          placeholder="Type A"
          data-group="typeA"
          onChange={e => this.change(e)}
        />

        <input
          type="text"
          name="col2"
          placeholder="Type B"
          data-group="typeB"
          onChange={e => this.change(e)}
        />
        
        <input
          type="text"
          name="typec"
          placeholder="Type C | New Type"
          data-group="typeC"
          onChange={e => this.change(e)}
        />
        
        <input
          type="text"
          name="typed"
          placeholder="Type D | New Type"
          data-group="typeD"
          onChange={e => this.change(e)}
        />

        <button onClick={this.handleSubmit}>Submit</button>
        {this.state.credentials && (
          <Credentials value={JSON.stringify(this.removeKey('credentials'), undefined, 2)} />
        )}
      </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>

Dans votre poignée de modification, récupérez l'attribut personnalisé et utilisez-le pour ajouter la valeur au tableau correct.

pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }

change = e => {

  // create a copy of  this.state.groups
  const copyGroups = JSON.parse(JSON.stringify(this.state.groups));

  // get data-group value
  const group = event.target.dataset.group;

  if (!copyGroups[0][group]) {
    copyGroups[0][group] = []; // add type if it doesn't exists
  }

  const groups = copyGroups[0][group];
  const index = this.findFieldIndex(groups, e.target.name);

  if (index < 0) {
    // if input doesn't exists add to the array
    copyGroups[0][group] = [...groups, { [e.target.name]: e.target.value }];
  } else {
    // else update the value
    copyGroups[0][group][index][e.target.name] = e.target.value;
  }

  this.setState({ groups: copyGroups });
};

<input
  type="text"
  name="col2"
  placeholder="Type A"
  data-group="typeA" // add custom attribute typeA | typeB etc.
  onChange={e => this.change(e)}
/>