React Forms : How to make input data as list objects with same input name?

Question

I'm Posting input data to API's where the API's structure as array list with n objects.

Problem: The problem I'm facing is while handling the change, i'm replacing the data instead of inserting as an another object.

My code as follows:

the objects in the list is dynamic not limited to two

in Constructor->

this.state={
formData: [
        {
          information: "",
          from: "",
          to: "",
        },
        {
          information: "",
          from: "",
          to: "",
        },
      ],
}

handling the Change as follow:

handleChange = (e) => {
    const { name, value } = e.target;
    const { formData} = this.state;
    this.setState({
        formData: {
          ...formData,
          [name]: value,
        },
      });

Handle submit:

handleSubmit = (e) => {
    e.preventDefault();
    console.log(this.state.formData);
    }

Form fields as follows:

<form onSubmit={this.handleSubmit}>
<div>
 <input  type="text"   name="information"   onChange={this.handleChange}   />
 <input  type="text"   name="from"          onChange={this.handleChange}   />
 <input  type="text"   name="to"            onChange={this.handleChange}   />
</div>
<div>
 <input  type="text"   name="information"   onChange={this.handleChange}   />
 <input  type="text"   name="from"          onChange={this.handleChange}   />
 <input  type="text"   name="to"            onChange={this.handleChange}   />
</div>
.
.
.
<button> + Add new Set (div) </button>
<button type="submit"> Submit </button>
</form>

I'm aware that mistake is handing logic but i tried lot to correct. Please help me out.

Edit: Expected output:

 [
        {                    
            "information": "info  1",
            "from": 1,
            "to": 50
        },
        {                    
            "information": "info  2",
            "from": 51,
            "to": 80
        },
        {
            "information": "info  3",
            "from": 81,
            "to": 100
        }
    ]

You are changing the formData from an array to an object in your handleChange function. Do you want to just append and object or replece something? — Viktor, Aug 31 '20 at 11:53
You need some kind of track to track from which input its change. As in your input name is not unique identifier — Shubham Verma, Aug 31 '20 at 11:54
@Viktor I need to append new
's which have input fields if user clicks on add button, these inputs should be {} in [] — Ramlal S, Aug 31 '20 at 11:58
then you should do something like `this.setState([...formState, {}])` — Viktor, Aug 31 '20 at 12:01

score 2 · Answer 1 · answered Aug 31 '20 at 11:51

If you want to insert a third object to formData you need to add curly brackets {} to frame [name]:value as an object. Also formData is an Array so it must be with square brackets not curly ones.

this.setState({
        formData: [
          ...formData,
          { [name]: value }
        ],

score 1 · Answer 2 · answered Aug 31 '20 at 11:58

The best approach is to use prevState in setState.

this.setState(prevState => ({...prevState, [name]: value }))

This will guarantee that you always use the previous state. setState is an async function, if you use formData it will not guarantee that the changes that you already dispatch are in place to be used.

score 1 · Answer 3 · answered Aug 31 '20 at 12:27

state={
formData: [
        {
          information: "",
          from: "",
          to: "",
        },
        {
          information: "",
          from: "",
          to: "",
        },
      ],
information:"",
from:"",
to:""
}
 
...

 <input  type="text"   name="information"   onChange={(event)=>{this.setState({information:event.target.value})}   />
 <input  type="text"   name="from"          onChange={(event)=>{this.setState({from:event.target.value})}  />
 <input  type="text"   name="to"            onChange={(event)=>{this.setState({to:event.target.value})}   />

...

handleSubmit = (e) => {
    e.preventDefault()
const data={  information: this.state.information,
          from: this.state.form,
          to: this.state.to}

    this.setState({formData:[this.state.formData,data]})

    console.log(this.state.formData);
    }

React Forms : How to make input data as list objects with same input name?

3 Answers3