ReactJs: Reading all the form input values when clicking on the submit button

Question

My form is made-up of multiple lines of this: This is the code:

   <Form>
              <Row form>
                <Col md={3}>
                  <FormGroup>
                    <Label for="element">Element</Label>
                    <Input type="text" name="element" id="element" />
                  </FormGroup>
                </Col>
                <Col md={3}>
                  <FormGroup>
                    <Label for="description">Description courte</Label>
                    <Input
                      type="text"
                      id="description"
                      name="description"
                    />
                  </FormGroup>
                </Col>
                <Col md={3}>
                  <FormGroup>
                    <Label for="coutUnitaire">Coût unitaire</Label>
                    <Input
                      type="text"
                      name="coutUnitaire"
                      id="coutUnitaire"
                    />
                  </FormGroup>
                </Col>
                <Col md={3}>
                  <FormGroup>
                    <Label for="quantite">Quantité</Label>
                    <Input type="text" name="quantite" id="quantite" />
                  </FormGroup>
                </Col>
              </Row>
              <Button
                color="primary"
                className="float-right"
                onClick={this.onDevisCreer}
              >
                Créer le devis
              </Button>
            </Form>

Usually, when it comes to retrieving values from a form I would use the value attribute and a listener:

   <Input
                        type="text"
                        id="noteText"
                        name="noteText"
                        type="textarea"
                        value={this.state.noteText}
                        onChange={this.onChange}
                        required
                      />

The listener:

  onChange(e) {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }

However, since that line will be repeated many times, I cannot create a state property for each input (4 items per line* nbr of lines).

The final result that I want is an an array of objects, where each object contains the informations in one line of the form:

    // I need to create an array of this:
// {
//       element: "TC 100",
//       description: "Toner Cartridge",
//       quantite: 2,
//       coutUnitaire: 2,
//       total: coutUnitaire*quantite, // to be calculated
//     }

I still cannot see how can I retrieve the values of the inputs of the form, if I will not bind them to a state property like I usually would.

Answer 1

I don't believe there is a way to get all values from the form. You would have to use controlled input (meaning you would need to use value with onChange ).

The other way if you want to use uncontrolled inputs is that you can assign ref for each input and then read the values on submit.

My suggestion would be to use the controlled inputs, make row as a new component and then use React.memo - so it will only re-render if there is an actual change in it. That is how I solved quite a few performance issues.