Можете ли вы скрыть определенные реагирующие фрагменты, представленные массивом?

Question

Резюме

У меня есть около 100 реактивных фрагментов, загруженных в массив, и затем переданных моему методу реагирующего рендера. Я пытаюсь реализовать панель поиска, чтобы пользователь мог быстро искать определенные заголовки. В моем случае вот как выглядит каждый элемент в моем массиве:

<Grid item md={10} style={{alignContent: 'center', alignItems: 'center', justifyContent: 'center', display: 'all'}}>
  <Card data={json[item]} title={item} onClick={that.props.install} result={testResult} 
</Grid>

Каждый заголовок выглядит примерно так: 20.0.15 , 20.0.16 , 20.0.20 , et c et c. Поэтому, если пользователь ввел 20.0.1 , учитывая только вышеприведенное, я бы хотел скрыть последнее.

Попытки

Я сделал быстрый и грязный способ простого удаления записи после циклического просмотра заголовков и установки setStating нового массива. Но мне любопытно, есть ли лучший способ. Вы заметите, у меня есть display: 'all' в моем JSX для сетки. Если установлено значение none, этот элемент будет скрыт. Есть ли способ программно установить это значение? Я попытался покопаться в элементе реакции и вручную установить его, но это выдает следующую ошибку: TypeError: Cannot assign to read only property 'display' of object '#<Object>'

Код, вызвавший эту ошибку: this.state.cardArray[i].props.style.display = 'none';

Есть очиститель способ просто скрыть реагирующие фрагменты в массиве?

Answer 1

Да, вы можете программно изменить значение display. Вот пример использования троичного оператора:

<Grid item md={10} display={title.includes(searchQuery) ? "all" : "none"}>
  <Card title={title}/>
</Grid>

Это условно установит свойство display для отображения заголовков, которые соответствуют searchQuery.

пользователя.