如何正确修改输入值并同时修改数组值？

Question

I render the values that I have inside an object and an input next to each of them with that object index item as value. When I try to use the onChange prop, I cannot modify neither the rendered value nor the input value. How can I do this changing the state of the element in the array?

I want the Toto value to be modified as I change the input value

My object players looks like this:

[
  {
  "name": "Toto";
  },
  {
   "name": "Lolz",
  }
]

Here, I try to render my table:

modifyItem = (event, index) => {
   this.state.players[index].name = event.target.value
   //my problem is clearly here
}

render() {
    const playersList = [...new Array(this.state.players.length)].map((it, index) => {
    return (
    <tr key={index}>
      <td>{this.state.players[index].name}</td>
        <input type="text" value={this.state.players[index].name} onChange={this.modifyItem}/>
      </td>
    </tr>
    )
    })

    return () {
      <div>
         {playersList}
      </div>
    }

What I want to do is:

In each element of the table AND input ( for example the first one Toto), I want to modify this value in the input and consecutively in the table. I can't seem to find the correct answer.

Answer 1

I've created a codesandbox example for you here:

https://codesandbox.io/s/vnkoxop6z3

You need to store your values in state, and when you modify each item you need to know what the new value is via the onChange callback, and the index of that current value.

From here you can duplicate the array by spreading it into a new one, access that particular index item on the new array, and update the name with the new value.

Once you have done this. setState with the new array.

class Component extends React.Component {
  constructor() {
    super();
    this.state = {
      values: [
        {
          name: "Toto"
        },
        {
          name: "Lolz"
        }
      ]
    };
  }

  modifyItem(e, index) {
    const newValue = e.target.value;
    const values = [...this.state.values];
    values[index].name = newValue;

    this.setState({
      values
    });
  }

  render() {
    return this.state.values.map((value, index) => {
      return (
        <Fragment>
          <label>{value.name}</label>
          <input
            type="text"
            value={value.name}
            onChange={e => this.modifyItem(e, index)}
          />
        </Fragment>
      );
    });
  }
}