Обновление состояния родителя в дочернем компоненте неизменным образом

Question

У меня есть массив объектов со следующими свойствами.

columns = [
           {Header: ƒ, Cell: ƒ, sortable: false, show: true},
           {Header: ƒ, accessor: "firstName", sortable: false, show: true},
           {Header: ƒ, accessor: "status", sortable: false, show: true},
           {Header: ƒ, accessor: "visits", sortable: false, show: true}
          ]

Этот массив объектов я отправляю его дочернему компоненту, а также метод, который будет использоваться для установки состояния родителя от дочернего.

Родительский компонент

<Child columns={this.props.child} handleSetState={this.handleSetState}/>

handleSetState = columns => {
    this.setState({ columns });
};

У меня есть раскрывающийся компонент в дочернем компоненте, где я показываю флажки в качестве параметров, извлеченных из реквизита.Также я выбираю некоторые из опций, и когда я нажимаю на Применить, свойство, которое соответствует объекту, должно обновляться, и, соответственно, родительское состояние

Например, при нажатии Применить, я формирую этот массив

value = ['firstName', 'status'];

Поэтому мне нужно, чтобы свойство 'show' родительского состояния обновлялось до его инвертированного значения.В основном show используется для отображения / скрытия столбцов

Дочерний компонент

  value = ['firstName','status'];
  submitSelection = () => {
    let updatedObj = this.props.columns.map((obj, i) => {
      if (obj.accessor === value[i]) {
        obj.show = !obj.show;
      }
      return obj;
    });
    this.props.handleSetState(updatedObj);
  };

При первом выборе я хочу, чтобы состояние должно быть обновлено как:

[
           {Header: ƒ, Cell: ƒ, sortable: false, show: true},
           {Header: ƒ, accessor: "firstName", sortable: false, show: false},
           {Header: ƒ, accessor: "status", sortable: false, show:false},
           {Header: ƒ, accessor: "visits", sortable: false, show: true}
]

Iя не могу правильно отобразить индексы внутри submitSelection ().Есть ли более чистая логика, чем она может быть реализована здесь?

Помощь будет оценена

Answer 1

Вы можете сделать свою функцию submitSelection более чистой, написав ее следующим образом:

  values = ['firstName','status'];

  submitSelection = () => {
    const updatedObj = this.props.columns.map(o => 
      values.some(val => val === o.accessor) 
      ? { ...o, show: !o.show } 
      : {...o}
    );
    this.props.handleSetState(updatedObj);
  };