Как я могу скрыть определенный элемент в списке реагирования?

Question

Я хочу скрыть определенный элемент в списке реагирования.

Вот как выглядит состояние:

 this.state = {
    lgShow: false,
    list: [ 
      { id:1, hidden: true },
      { id:2, hidden: true }
    ]
  };

Вот так выглядит компонент:

  props.list.map( result => (
     <button onClick={toggle(result.id)}> Hide </button>
     { result.hidden && <div id={result.id}> .... </div>  }
  ))

Я хочу написать функцию toggle, которая ищет идентификатор в App.js и изменить значение скрытого для этого идентификатора, что-то вроде этого (хотя я не могу установить setState () в этом случае).

 let toggle = id => {
    this.state.list.filter( val=>val.id===id ? val.hidden=!val.hidden )
 }

Answer 1

let toggle = id => {
  let newList = list.map(val => val.id === id ? { id: val.id, hidden: !val.hidden} : val);
  this.setState({list: newList})
}

Вы можете сделать это внутри переключателя на setState()

Answer 2

Вам нужно использовать метод setState для обновления состояния list, это единственный способ обновить DOM в реакции.Каждый раз, когда состояние / опора изменяется только тогда, DOM будет перерисовываться.Так работает React.

Я обновил функцию toggle, теперь она выполняет итерацию по массиву list и переключает скрытый флаг id, передаваемый в параметре toggle(id).

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      lgShow: false,
      list: [ 
        { id:1, hidden: true },
        { id:2, hidden: true }
      ],
    };
  } // end of constructor
  
  toggle = (id) => {
    const list = this.state.list.map(item => {
      if (item.id === id) {
        return { ...item, hidden: !item.hidden }; 
      }
      return item;
    })
    this.setState({ list })
  } // end of toggle
  
  render() {
    return (
      <div>
        {list.map( result => (
          <>
            <button onClick={() => toggle(result.id)}> Hide </button>
            {result.hidden && <div id={result.id}>....</div>}
          </>
        ))}
      </div>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

PS: я не запускал этот код, просто пробный прогон на блокноте.