editing array items dynamically in react native

Question

This is my state and array:

this.state = {
  arr: [{
    arrid: 0,
    arrEmail: '',
    arrName: '',
    arrPhone: ''
  }],
  id: 0,
  email: "",
  isChecked: true,
  name: "",
  phone: "",
  isOpen: false,
  editedEmail: '',
  editedName: '',
  editedPhone: ''
};

This is the place where they are getting edited:

updateEmail = value => {
  this.setState({ editedEmail: value });
};
updateName = value => {
  this.setState({ editedName: value });
};
updatePhone = value => {
  this.setState({ editedPhone: value });
};

This the function of editing an element dynamically:

editData = (row) => {
  this.refs.modal2.close();
  var arr3 = this.state.arr;
  var arrid = this.state.id;
  var index = arr3.indexOf(row);
  var editedName = this.state.editedName;
  var editedEmail = this.state.editedEmail;
  var editedPhone = this.state.editedPhone;

  this.setState({
    arrid: arrid,
    arrEmail: editedEmail,
    arrName: editedName,
    arrPhone: editedPhone
  });
}

But it is not getting edited. Firstly, they are not getting stored in.

arr3

Answer 1

Use this in your editData function:

this.setState(arr:[...arr3.map(item=>item.arrid===arrid?{...item,arrEmail:editedEmail, arrName:editedName, arrPhone:editedPhone }:item)]);