title: How to make a React dropdown to render the array the user clicks on AND show "nothing found here!" if array is empty?
body: <p>I'm trying to figure out a better way to render the array of objects of this Dropdown.
  I can currently see all arrays correctly but, for example, if captured or released arrays are empty, I get an empty screen. I tried setting up the ternary operator such as &quot;value === capturedPkm &amp;&amp; capturedPkm === '' ? Nothing found here : capturedPkm.map() but then I would need another : to show 'released' or 'all' and that's not how the ternary operator works. How can I make it so to show Nothing to be found here if the array are empty AND show another component when the user clicks on it? I hope I made myself clear enough. If not, please tell me so!</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import PokemonCard from &quot;./PokemonCard&quot;;
  
  const Dropdown = ({
    pokemons,
    capturedPkm,
    releasedPkm,
    setCapturedPkm,
    setReleasedPkm,
  }) =&gt; {
    const [value, setValue] = useState([pokemons]);
    const handleChange = (e) =&gt; setValue(e.target.value);
    return (
      &lt;div className=&quot;select&quot;&gt;
        &lt;select name={JSON.stringify(value)} onChange={handleChange}&gt;
          &lt;option value={JSON.stringify(pokemons)}&gt;All&lt;/option&gt;
          &lt;option value={JSON.stringify(capturedPkm)}&gt;Captured&lt;/option&gt;
          &lt;option value={JSON.stringify(releasedPkm)}&gt;Released&lt;/option&gt;
        &lt;/select&gt;
        &lt;div
          style={{
            display: &quot;flex&quot;,
            flexWrap: &quot;wrap&quot;,
            justifyContent: &quot;space-evenly&quot;,
          }}
        &gt;
          {value === JSON.stringify(capturedPkm)
            ? capturedPkm.map((el, i) =&gt; {
                return (
                  &lt;div&gt;
                    &lt;img src={el.img} alt={&quot;pokemon&quot;} /&gt;
                    {el.name}
                  &lt;/div&gt;
                );
              })
            : value === JSON.stringify(releasedPkm)
            ? releasedPkm.map((el, i) =&gt; {
                return &lt;div&gt;{el.name}&lt;/div&gt;;
              })
            : pokemons.map((pokemon, index) =&gt; {
                return (
                  &lt;div style={{ width: &quot;235px&quot; }} key={index}&gt;
                    &lt;PokemonCard
                      pokemon={pokemon}
                      index={index}
                      name={pokemon.name}
                      capturedPkm={capturedPkm}
                      setCapturedPkm={setCapturedPkm}
                      notCapturedPkm={releasedPkm}
                      setNotCapturedPkm={setReleasedPkm}
                    /&gt;
                  &lt;/div&gt;
                );
              })}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Dropdown;
  </code></pre>