Updating state of list in react-CodePudding

I am building a React App and I build few input fields. And I am trying to update their value which is through state. But it is creating a new instance whenever I type in field

App.js

class App extends React.Component {
    state = {
         fields = [
            {
               id: nextId(),
               value: '',
            },
            {
               id: nextId(),
               value: '',
            },
            {
               id: nextId(),
               value: '',
            },
       ]
    }

    updateValue = (evt) => {
        var item = Object.assign({}, this.state.fields[evt.target.id], {value: evt.target.value}

        var fields = this.state.fields;
        fields[evt.target.id] = item
        this.setState({fields: fields})
    }


    render() {
        return (

              {this.state.fields.map((values) => (
              <>
             <input id={values.id} value={values.value}  type="text" onChange={this.updateValue} />
             </>
           ))}

        )
    }
}

I have tried many times but it is still creating new instance every time I change the field and not updating the list state.

What I am trying to do?

I am trying to update the value of state of every particular field the user is typing or writing into

I am using react-id-generator where I used nextId()

Any help would be much appreciated.

CodePudding user response：

Whenever you work with array states and you need to access (edit, or delete) an item it's a good practice to access it by its index. So the updateValue implementation could look like this.

updateValue = (index) => (event) => {
  // never mutate the state, clone the array first
  // I do it with slice but there are many ways to achieve that
  const newFields = this.state.fields.slice(0);

  // access the element by its index and update its value property
  newFields[index].value = event.target.value;

  // update the state
  this.setState({ fields: newFields });
};

class App extends React.Component {
  state = {
    fields = [
      {
        id: 1,
        value: '',
      },
      {
        id: 2,
        value: '',
      },
      {
        id: 3,
        value: '',
      },
    ],
  };

  updateValue = (index) => (event) => {
    let newFields = this.state.fields.slice(0);

    newFields[index].value = event.target.value;

    this.setState({ fields: newFields });
  };

  render() {
    return (
      <>
        {this.state.fields.map(({ id, value }, index) => (
          // call updateValue with the field's index
          <input id={id} onChange={this.updateValue(index)} value={value} />
        ))}
      </>
    );
  }
}