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
– Viktor, Commented Aug 31, 2020 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
– Shubham Verma, Commented Aug 31, 2020 at 11:54
@Viktor I need to append new <div>'s which have input fields if user clicks on add button, these inputs should be {} in [] — Ramlal S
– Ramlal S, Commented Aug 31, 2020 at 11:58
then you should do something like this.setState([...formState, {}]) — Viktor
– Viktor, Commented Aug 31, 2020 at 12:01

elMeroMero · Accepted Answer · 2020-08-31 11:51:59Z

2

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 }
        ],

answered Aug 31, 2020 at 11:51

elMeroMero

9801 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Victor Barros · Accepted Answer · 2020-08-31 11:58:51Z

1

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.

answered Aug 31, 2020 at 11:58

Victor Barros

1317 bronze badges

Comments

Jinen Abdelhak · Accepted Answer · 2020-08-31 12:27:06Z

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);
    }

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related