title: I'm getting this error: Invalid hook call. Hooks can only be called inside of the body of a function component
body: <p>I'll start by saying I've gone through <a href="https://reactjs.org/warnings/invalid-hook-call-warning.html" rel="nofollow noreferrer">this page</a> and I don't see any reason why I will be getting this error, my versions are all fine and I don't have duplicate Reacts.</p>
  <p>The error is thrown when I click on a card.</p>
  <p>This is my App.js:</p>
  <pre><code>const App = () =&gt; {
    const [inputString, setInputString] = useState(&quot;&quot;) //Error points to here
  
    const updateInput = (e) =&gt; {
      const lowerString = e.target.value.toLowerCase();
      setInputString(lowerString);
    }
  
    return (
      &lt;&gt;
      &lt;div className='search-bar-container'&gt;
        &lt;img src='https://cdn-icons.flaticon.com/png/512/868/premium/868596.png?token=exp=1647880908~hmac=5e802c3c8b8423596716ca9353212d17' className='poke-ball-img' /&gt;
        &lt;input type='text' placeholder='Search For a Pokemon!' onChange={updateInput}&gt;&lt;/input&gt;
      &lt;/div&gt;
      &lt;div className='card-container'&gt;
        &lt;RenderPokemon input={inputString} /&gt;
      &lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>And this is RenderPokemon:</p>
  <pre><code>const RenderPokemon = (text) =&gt; {
    const [rawPokemonList, setRawPokemonList] = useState([]);
    const getPokemonData = async (id) =&gt; {
      //Move this out somehow, to avoid calling on every render 
      try {
        const res = await fetch(&quot;https://pokeapi.co/api/v2/pokemon/&quot; + id);
        const pokemon = await res.json();
        return pokemon;
      } catch (e) {
        console.log(e);
      }
    };
  
    const sortPokemonList = rawPokemonList.filter((poke) =&gt; {
      if(text.input === &quot;&quot;) {
        return poke;
      } else {
        return poke.name.toLowerCase().includes(text.input)
      }
    })
  
    useEffect((i) =&gt; {
      const promises = [];
      for (let i = 1; i &lt; 152; i++) {
        promises.push(getPokemonData(i));
      }
      Promise.all(promises).then((results)=&gt;{
        setRawPokemonList(results);
      })
    }, []);
  
    return (
        (sortPokemonList).map(poke=&gt;(
          &lt;div className='card' onClick={updatePokemonId} id={poke.id}&gt;
            &lt;img src={'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/' + poke.id + '.svg'} className='PokeImg' key={poke.id} id={poke.id}/&gt;
            &lt;div className='container'&gt;
              &lt;p&gt;{poke.name}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        ))
    )
  }
  
  export default RenderPokemon;
  </code></pre>