Handle multiple react form input and update the state of the component

Question

I have a form with multiple input. On Form Submit, I would like to update the component state and add a new entry to it.

Problems, I don't know how I can get all input values, should i use refs?

The wanted result should look like:

state = { persons: [{Per1},{Per2},{Per3} etc] }

or

state = { persons: {{Per1},{Per2},{Per3} etc} }

Don't know what is best...

Here is my code:

class PersonForm extends Component {
  

import React, { Component } from "react";

import Input from "./input";

class PersonForm extends Component {
  state = {
    persons: {
      name: "urlTests",
      age: "titre",
      surname: "auteur",
      date: "2014-02-10T10:50:42",
    },
  };

  handleOnChange = (e) => {
    console.log(e.currentTarget.value);
    console.log(e.currentTarget.name);
    const persons = { ...this.state.persons };
    persons[e.currentTarget.name] = e.currentTarget.value;
    this.setState({ persons }); // Yes I can see the component getting updated in debug mode but do I need this?
  };

  // personForm
  handleOnSubmit = (e) => {
    e.preventDefault();
    console.log("onSubmit");
    const persons = { ...this.state.persons };
    console.log(persons);
    const newPersons = { !!!!!!!!! CREATE AN OBJECT OF THE PERSON INPUTS VALUES + PREVIOUS STATE};
    console.log(newPersons);

    this.setState({ persons: newPersons }); // UPDATE THE STATE
  };

  render() {
    return (
      <div id="contB">
        <h1>PersonForm Component</h1>

        <form onSubmit={this.props.onSubmit}>
          <Input
            // onChange={this.handleOnChange}
            type="text"
            name="name"
            placeholder="name"
          />
          <Input
            // onChange={this.handleOnChange}
            type="text"
            name="surname"
            placeholder="Auteur"
          />
          <Input
            // onChange={this.handleOnChange}
            type="number"
            name="age"
            placeholder="age"
          />

          <Input
            // onChange={this.handleOnChange}
            type="date"
            name="date"
            placeholder="Date"
          />
          <button type="submit">Create Person</button>
        </form>
      </div>
    );
  }
}

export default PersonForm;

Answer 1

First, separate array containing all persons and object containing current person:

state = {
  persons: [],
  person: {
    name: "urlTests",
    age: "titre",
    surname: "auteur",
    date: "2014-02-10T10:50:42",
  },
};

handleOnChange updates person, so is contains current values from inputs:

handleOnChange = (e) => {
  this.setState({
    person: {
      ...this.state.person,
      [e.target.name]: e.target.value
    }
  });
};

handleOnSubmit add person to persons:

handleOnSubmit = (e) => {
  e.preventDefault();
  this.setState({
    persons: [
      ...this.state.persons, 
      this.state.person
    ],
    person: {
      name: "",
      age: "",
      surname: "",
      date: "",
    }
  });
};

And you need to add value attr to inputs:

<Input
  onChange={this.handleOnChange}
  type="text"
  name="name"
  placeholder="name"
  value={this.state.person.name}
/>

And this part looks strange <form onSubmit={this.props.onSubmit}> - maybe here should be just <form onSubmit={this.onSubmit}> without props

Answer 2

My first question would be why do you need to store multiple "Persons" within a single "PersonForm"? I'd expect the state of this component to only contain that of one person, not multiple.

If you want to display multiple people I recommended passing a prop to this component such as handleSubmit. And manage multiple people in the parent component.

Regarding:

The wanted result should look like:

state = { persons: [{Per1},{Per2},{Per3} etc] }

or

state = { persons: {{Per1},{Per2},{Per3} etc} }

The second is not valid Javascript. You're options are either an array of Persons or an Object with some key value. In the case of people, an ID would work. E.g:

{
 people: {
    "id1": { ... },
    "id2": { ... },
 }
}

Without knowing the context, I'd recommend going with just an array as it's simpler and probably sufficient for your use case.

Regarding:

Problems, I don't know how I can get all input values, should i use refs?

Just create multiple handlers. One for each field. E.g:

handleNameUpdated = () => { ... }
handleSurnameUpdated = () => { ... }
handleAgeUpdated = () => { ... }
handleDateUpdated = () => { ... }

Then inside your handler update the relevant piece of state. E.g:

handleNameUpdated = () => {
  this.setState({ name: e.currentTarget.value });
}