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
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.
My form is made-up of multiple lines of this:
This is the code:
<Input type="text" name="element" id="element" />
<Label for="description">Description courte</Label>
<Label for="coutUnitaire">Coût unitaire</Label>
<Input type="text" name="quantite" id="quantite" />
Créer le devis
Usually, when it comes to retrieving values from a form I would use the value attribute and a listener:
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.
I don’t see how that solves my problem. I don’t see how I would retrieve the values
Sorry for that, I might have been a bit unclear above. I edited so it should be clearer.