使用地图和索引es6更新嵌套数组的值

Question

I have a react form which has dynamic rows, but I'm stuck at line 76 (Demo: https://codesandbox.io/s/pw58j0vzoq ), not sure what can I do to update the value in the row

class App extends React.Component {
  state = {
    acceptedValues: [
      {
        id: 1,
        _arguments: ["Samsung", "xiaomi"]
      },
      {
        id: 2,
        _arguments: ["OR", "AND"]
      }
    ]
  };

  handleChange = (name, index, argumentIndex) => e => {
    const { acceptedValues } = this.state;
    if (name === "_arguments") {
      updatedState = acceptedValues.map((o, i) => {
        if (i === index) {
          return {
            ...o,
            _arguments: o._arguments.map((o2, index2) => {
              if (index2 === argumentIndex) {
                //what to do here?
              }
              return o;
            })
          };
        }
        return o;
      });
      this.setState({
        acceptedValues: updatedState
      });
    }
  };

  render() {
    const { acceptedValues } = this.state;
    return (
      <div>
        {acceptedValues.map(({ operator, _arguments }, index) => (
          <div style={{ marginBottom: 20 }}>

            <div>
              {_arguments.map((val, argumentIndex) => (
                <div>
                  <input
                    onChange={this.handleChange(
                      "_arguments",
                      index,
                      argumentIndex
                    )}
                    id="_arguments"
                    type="text"
                    value={val}
                  />
                  <button onClick={this.removeArgument(index, argumentIndex)}>
                    -
                  </button>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    );
  }
}

I'm able to navigate until the correct array but stuck at how to update the value within the array, I've 2 indexs in my handleChange function.

Answer 1

There you are mapping an array into another, so you should just pick which string to return, like this:

_arguments: o._arguments.map(
    (o2, index2) => {
        if (index2 === argumentIndex) return e.target.value
        return o2
    }
)

Or in an even cleaner way:

_arguments: o._arguments.map(
    (o2, index2) => index2 === argumentIndex ? e.target.value : o2
)