Как отобразить сообщение, если в React нет отфильтрованных результатов?

Question

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

Пример можно найти в CodeSandbox здесь: https://codesandbox.io/embed/search-bar-test-odxw8

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

Я попытался использовать логику, которая говорит: «если длина массива0, отобразить сообщение ".Проблема в том, что массив, по-видимому, всегда имеет одинаковую длину и не связан с количеством элементов, отображаемых на экране.

Я также пытался использовать логику, которая говорит «если введенное слово несопоставьте ключевые слова объекта, отобразите сообщение ".Это не выдает ошибку, но это также не работает, как ожидалось.Сообщение остается видимым всегда.

Мое состояние:

this.state = {
  AnimalList,
  AnimalFilter: ""
};

Пример моей условной логики:

{/* This is where I'm trying to place the conditional logic */}
{/* For example, typing "pig" should make this appear */}

{this.state.AnimalFilter!== AnimalList.keywords && (
  <h2>No Results</h2>
)}

Методы фильтрации и отображения:

        <div className="container">
          {AnimalList.filter(animal =>
            animal.keywords
              .toLocaleLowerCase()
              .includes(this.state.AnimalFilter.toLocaleLowerCase())
          ).map(({ object1, object2, object3 }, index) => (
            <AnimalCard
              key={index}
              object1={object1}
              object2={object2}
              object3={object3}
            />
          ))}
        </div>

Данные:

export default [
  {
    object1: "horse",
    object2: "goat",
    object3: "panda",
    keywords: "horse goat panda"
  },
  {
    object1: "horse",
    object2: "cat",
    object3: "cow",
    keywords: "horse cat cow"
  },
  {
    ...
  },
  ...
];

Я ожидаю, что сообщение будет отображаться на экране, когда пользователь вводит слово, которое "не существует".На данный момент сообщение будет отображать либо полное время, либо не отображать его вообще.