title: How do I render a message when there are no filtered results in React?
body: <p>I have a search bar that updates the state based on user input. Components that don't match the keywords I've set up will get filtered out and will not render to the screen. How do I display a message when there are no matches in the search bar?</p>
  
  <p>An example can be found on CodeSandbox here:
  <a href="https://codesandbox.io/embed/search-bar-test-odxw8" rel="nofollow noreferrer">https://codesandbox.io/embed/search-bar-test-odxw8</a></p>
  
  <p>I am using an array of objects to store the data. I'm using the map function to separate the data into individual components, and the filter function to perform a re-render as the user inputs a word.</p>
  
  <p>I tried using logic that says "if the array length is 0, display the message". The problem with that is the array is apparently always the same length and isn't connected to the amount of items being rendered to the screen.</p>
  
  <p>I also tried using logic that says "if the inputted word doesn't match the object's keywords, display the message". This doesn't throw an error, but it also does not work as expected. The message remains visible at all times.</p>
  
  <p>My state:</p>
  
  <pre><code>this.state = {
    AnimalList,
    AnimalFilter: ""
  };
  </code></pre>
  
  <p>An example of my conditional logic:</p>
  
  <pre><code>{/* This is where I'm trying to place the conditional logic */}
  {/* For example, typing "pig" should make this appear */}
  
  {this.state.AnimalFilter!== AnimalList.keywords &amp;&amp; (
    &lt;h2&gt;No Results&lt;/h2&gt;
  )}
  </code></pre>
  
  <p>The filter and map methods:</p>
  
  <pre><code>        &lt;div className="container"&gt;
            {AnimalList.filter(animal =&gt;
              animal.keywords
                .toLocaleLowerCase()
                .includes(this.state.AnimalFilter.toLocaleLowerCase())
            ).map(({ object1, object2, object3 }, index) =&gt; (
              &lt;AnimalCard
                key={index}
                object1={object1}
                object2={object2}
                object3={object3}
              /&gt;
            ))}
          &lt;/div&gt;
  </code></pre>
  
  <p>The Data:</p>
  
  <pre><code>export default [
    {
      object1: "horse",
      object2: "goat",
      object3: "panda",
      keywords: "horse goat panda"
    },
    {
      object1: "horse",
      object2: "cat",
      object3: "cow",
      keywords: "horse cat cow"
    },
    {
      ...
    },
    ...
  ];
  
  </code></pre>
  
  <p>I expect for the message to display to the screen when a user inputs a word that "doesn't exist". As of now, the message will either display the entire time or not at all.</p>