Store data from dynamic input form to object (React)

Question

I has a list of object stored in the state. I want to store input data into the object in a format like this.

{
    "parameter" : [{
        "id":"parameter1",
        "value":"value1"
    }, {
        "id":"parameter2", 
        "value":"value2"
    }]
}

The thing is the number of input is not constant. If there are 10 inputs, my object length should be 10.

(1) type "value1" in a input id=parameter1

{
    "parameter" : [{
        "id":"parameter1",
        "value":"value1"
    }]
}

(2) type "value2" in a input id=parameter2

{
    "parameter" : [{
        "id":"parameter1",
        "value":"value1"
    }, {
        "id":"parameter2", 
        "value":"value2"
    }]
}

(3) type "value3" in a input id=parameter1

{
    "parameter" : [{
        "id":"parameter1",
        "value":"value3"
    }, {
        "id":"parameter2", 
        "value":"value2"
    }]
}

I wrote onchange handler function but the length of the object always equal to 1. It changed id and value of my object only.

onChangeHandlerParameter = e => {
  this.setState({ parameter:[{"id": e.target.id,"value": e.target.value}]})
}

(1) type "value1" in a input id=parameter1

{
    "parameter" : [{
        "id":"parameter1",
        "value":"value1"
    }]
}

(2) type "value2" in a input id=parameter2

{
    "parameter" : [{
        "id":"parameter2",
        "value":"value2"
    }]
}

Answer 1

The problem is with on change handler

onChangeHandlerParameter = e => {
  this.setState((prevState) => {
          parameter:[
                    ...prevState.parameter,
                    {"id": e.target.id,"value": e.target.value}
                    ]
               });
}

You are changing your state but overwriting the existing one. so you are getting only one item in the array every time that also the latest you added.

'...' is spreader operator and it is spreading of array in your case.

Answer 2

You should add the item (push) to the parameter array, the current code is just put new values to the whole array.

Could be changed to something like this:

onChangeHandlerParameter = e => {
   const { parameter } = this.state;
   parameter.push({"id": e.target.id,"value": e.target.value})
   this.setState({ parameter })
}

Answer 3

When you write this way

onChangeHandlerParameter = e => {
  this.setState({ parameter:[{"id": e.target.id,"value": e.target.value}]})
}

you are actually overwriting the existing state, this will not work, it will always have your last input entered data.

To make this work you need to tweak this a little bit using spread operator.

Fix:

    onChangeHandlerParameter = e => {
    const currentState = {...this.state};
    const edittedParametersList = [...currentState.parameter];
    let element = {};
    element.id = e.target.id;
    element.value = e.target.value;
    edittedParametersList.parameter.push(element);
    this.setState(edittedParametersList);
  }

This way your code will work and also we are making sure we don't mutate state directly ( Which is a best practice ), we are editing it in an immutable fashion.

happy hacking!