Делая небольшое упражнение по созданию карточек монстров с помощью компонентов 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>
</>
  1. Компонент CardList получает свойства monsters и searchInput от родительского компонента. monsters — для извлеченных данных JSON, а searchInput — для значения, введенного пользователем (e.target.value).
  2. Нам нужно преобразовать введенные пользователем слова в нижний регистр, а также имена монстров, начинающиеся с заглавных букв. Здесь toLowerCase() используется и сохраняется в переменной.
  3. 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() фильтрует данные только тогда, когда пользователь вводит поисковый запрос. Все данные появятся, если ничего не вводить.