ReactJS - Get data from multiple TextField (unknown quantity) then setState

Question

I have a list of columns, they are rendered as TextFields:

{columns.map((column, index) => (
    <TextField
        key={index}
        margin="dense"
        id={column}
        label={column}
        name={column}
        type="text"
        onChange={this.handleInputChange}
        fullWidth/> 
    ))}

and handleInputChange function is written as below:

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      addData: {
        [this.state.fullName]:{
            [name]: value
        }
      }
    });
}

The data that I want to receive is:

addData: {
    [name-of-column-1]: value,
    [name-of-column-2]: value,
    [name-of-column-3]: value,
    .......
}

but the handleInputChange function overrides after every TextField change, the data that I received:

addData: {
    [name-of-column-1 (or 2, 3...)]: value,
}

Is there any way to get the data I need? Thanks everyone!

you should change this part of code [this.state.fullName]:{ [name]: value } — Dostonbek Oripjonov, Sep 18 '19 at 09:20
checkout this one bro https://stackoverflow.com/questions/29280445/reactjs-setstate-with-a-dynamic-key-name?rq=1 — Dostonbek Oripjonov, Sep 18 '19 at 09:57

score 0 · Accepted Answer · answered Sep 18 '19 at 09:22

How do I setState for nested object?

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      addData: {
        [this.state.fullName]:{
            ...this.state.addData[this.state.fullName],
            [name]: value,
        }
      }
    });
}

score 0 · Answer 2 · answered Sep 18 '19 at 09:26

You are assigning whole new object every time value from one TextField changes and not retaining old values from state.

I'm not sure what exactly is this.state.fullName, but in order to have your desired state structure you can implement it like this:

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      addData: {
        ...this.state.addData,
        [name]: value
      }
    });
}

When destructing this.state.addData (with ...), you are basically assigning all of its properties to the new object and then adding additional [name]: value. Its important to put destruction above new assignment in order to update latest value.

Yes, but in my case it look like this: ...this.state.addData[this.state.fullName] Thank you! :) — Man Ho, Sep 18 '19 at 10:07

Hải Bùi · Answer 3 · 2019-09-18T09:47:37.233

0

This's a issue when you setState. When you using

this.setState({
      addData: {
        [this.state.fullName]:{
            [name]: value
        }
      }
    });

that mean you are setting a new state just have one nested object

addData { abc: value }

so the old values are lost. You need add them before you change the new value. Try this

handleInputChange(event) {
    const { name, value } = event.target;
    const newData = {...this.state.addData};
    newData[name] = value;

    this.setState({ addData: newData });
}

or

handleInputChange(event) {
    const { name, value } = event.target;

    this.setState({
        addData: {
            ...this.state.addData,
            [name]: value
        }
    });
}

edited Sep 18 '19 at 09:47

answered Sep 18 '19 at 09:29

Hải Bùi

2,492
2
9
17

You can not change state const { addData } = this.state; addData[name] = value; in this way – Dostonbek Oripjonov Sep 18 '19 at 09:31
u r changing object inside state without setState – Dostonbek Oripjonov Sep 18 '19 at 09:39
it happens bro. Good luck – Dostonbek Oripjonov Sep 18 '19 at 09:54
This way is right, but in my case the newState must be like this: const newData = {...this.state.addData[this.state.fullName}; Thank you! :) – Man Ho Sep 18 '19 at 09:57

score 0 · Answer 4 · answered Sep 18 '19 at 09:36

0

I think you should prepare your data first and set it into your state or try in this way

this.setState({
      addData: {
        [...this.state.fullName]:{
            [name]: value
        }
      }
    });

answered Sep 18 '19 at 09:36

Dostonbek Oripjonov

1,508
1
12
28

ReactJS - Get data from multiple TextField (unknown quantity) then setState

4 Answers4