Делая небольшое упражнение по созданию карточек монстров с помощью компонентов React и метода map, я подумал написать о том, как создать функцию фильтрации результатов поиска по ключевым словам. Это позволило мне использовать различные методы, такие как filter() и map(), для создания фильтра, который мы используем повсюду в Интернете.
Фильтр результатов поиска выглядит так, как показано выше. Я бы ввел ключевые слова имени монстра, и любое имя монстра, которое включает введенные ключевые слова, будет отфильтровано и появится.
Данные каждого монстра, такие как имя, изображение, электронная почта и т. д., находятся в файле JSON, который я извлек и передал дочерним компонентам, чтобы каждый из них мог отображаться автоматически.
class CardList extends Component { const { monsters, searchInput } = this.props; const lowercasedSearchInput = searchInput.toLowerCase(); const filteredMonsters = monsters.filter((monster) => monster.name.toLowerCase().includes(lowercasedSearchInput)); return ( <> <div className=”card-list”> {filteredMonsters.map((element, index) => { return ( <Card key={index} cardId={element.id} cardName={element.name} cardEmail={element.email} /> ); })} </div> </>
- Компонент CardList получает свойства
monsters
иsearchInput
от родительского компонента.monsters
— для извлеченных данных JSON, аsearchInput
— для значения, введенного пользователем (e.target.value
). - Нам нужно преобразовать введенные пользователем слова в нижний регистр, а также имена монстров, начинающиеся с заглавных букв. Здесь
toLowerCase()
используется и сохраняется в переменной. monsters
— это массив данных, в котором есть объекты с ключами, представляющими каждую информацию, такую как имя, адрес электронной почты, изображение и т. д., например:
[ { "id": 1, "name": "Leanne Graham", "username": "Bret", "email": "[email protected]", "address": { "street": "Kulas Light", "suite": "Apt. 556", "city": "Gwenborough", "zipcode": "92998-3874", "geo": { "lat": "-37.3159", "lng": "81.1496" } }, "phone": "1-770-736-8031 x56442", "website": "hildegard.org", "company": { "name": "Romaguera-Crona", "catchPhrase": "Multi-layered client-server neural-net", "bs": "harness real-time e-markets" } }, ...
Поскольку мы хотим отфильтровать их по именам, нам нужно получить доступ к ключу «имя» и его значениям. Для этого мы можем использовать filter()
для доступа к каждому элементу массива, а затем вызывать ключ «name». Затем я изменил имя на строчные, а затем проверил, включает ли имя поисковый ввод в нижнем регистре.
4. Затем filteredMonsters
сопоставляется каждому элементу, отображаемому в компоненте карточки. этот map()
принимает два параметра, element
и index
. В этом упражнении для атрибута key
используется index
, поскольку элементы не будут изменены. В противном случае для каждого требуется уникальный key
. Обратите внимание, что filter()
фильтрует данные только тогда, когда пользователь вводит поисковый запрос. Все данные появятся, если ничего не вводить.