Обновите значения вложенного массива, используя карту и индекс es6

Question

У меня есть форма реагирования с динамическими строками, но я застрял в строке 76 (Демонстрация: https://codesandbox.io/s/pw58j0vzoq),, не уверен, что я могу сделать, чтобы обновить значение в строке

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>
    );
  }
}

Я могу перемещаться до нужного массива, но застрял в том, как обновить значение в массиве, у меня есть 2 индекса в моей функции handleChange.

Answer 1

Там вы отображаете массив в другой, поэтому вам нужно просто выбрать, какую строку возвращать, например:

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

Или еще чище:

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