React.JS Form Submission Array of Objects

Into
The process whether the value is text or checkbox or radio is the same, the hard part is organizing them and having it get done right in a way were the changes are done dynamically.

Step1

These are the three functions you will need to make this work. The use state will allow us to affect the rendering. The submit and change will be used to manipulate the data with association to the input, and form html elements.

Step 2

This was the function we are going to use in these HTML elements you see no value, that will change we will need, will show you later. This style of submitting a form can work on all types, not just text , and will focus on text because it is easier to understand.

Step 3

Fill the STATE variable with an appropriate data structure. This example, I will be using an array of objects. Inside the object there will be keys. These keys will be specifically named to match the keys that will be rendered on the page. For my page has a username and password keys and slot so I will put in my new STATE object to have keys like so.

In addition here in the submit function you will need a preventdefault to prevent the object from wiping out the data that was put. When the event is invoked the function preventDefault().

Step 4

Finally we are going to create a function which manipulates state in consistently updating our HOOK thanks to our SET value. In here also we are going to use the SPREAD operator because when we don't want to destroy data but instead add data. The spread will allow us to make a clone of our DATA variable’s content while we add a new object to our array of objects.

Know the values will be added, as you see in the SET there is a key which takes the value for the ID and the value part takes the value of the input. Yet remember we did not put a value when we first created the input. In this step, you will tell the machine to grab the id part for the key and value for the value of the newly created object .

BOUNS
This system does not need to be with input associated with only type text and text values that can be with all data types. I am going to show an example below for an image and give an option for a checkbox instead of text only.