I'm getting this error: Invalid hook call. Hooks can only be called inside of the body of a function component

Question

I'll start by saying I've gone through this page 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.

The error is thrown when I click on a card.

This is my App.js:

const App = () => {
  const [inputString, setInputString] = useState("") //Error points to here

  const updateInput = (e) => {
    const lowerString = e.target.value.toLowerCase();
    setInputString(lowerString);
  }

  return (
    <>
    <div className='search-bar-container'>
      <img src='https://cdn-icons.flaticon.com/png/512/868/premium/868596.png?token=exp=1647880908~hmac=5e802c3c8b8423596716ca9353212d17' className='poke-ball-img' />
      <input type='text' placeholder='Search For a Pokemon!' onChange={updateInput}></input>
    </div>
    <div className='card-container'>
      <RenderPokemon input={inputString} />
    </div>
    </>
  );
}

export default App;

And this is RenderPokemon:

const RenderPokemon = (text) => {
  const [rawPokemonList, setRawPokemonList] = useState([]);
  const getPokemonData = async (id) => {
    //Move this out somehow, to avoid calling on every render 
    try {
      const res = await fetch("https://pokeapi.co/api/v2/pokemon/" + id);
      const pokemon = await res.json();
      return pokemon;
    } catch (e) {
      console.log(e);
    }
  };

  const sortPokemonList = rawPokemonList.filter((poke) => {
    if(text.input === "") {
      return poke;
    } else {
      return poke.name.toLowerCase().includes(text.input)
    }
  })

  useEffect((i) => {
    const promises = [];
    for (let i = 1; i < 152; i++) {
      promises.push(getPokemonData(i));
    }
    Promise.all(promises).then((results)=>{
      setRawPokemonList(results);
    })
  }, []);

  return (
      (sortPokemonList).map(poke=>(
        <div className='card' onClick={updatePokemonId} id={poke.id}>
          <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}/>
          <div className='container'>
            <p>{poke.name}</p>
          </div>
        </div>
      ))
  )
}

export default RenderPokemon;

You shouldn't be getting that error with the code you've included in your question. — Andy, Mar 22 '22 at 17:12
@freebugcoding That's true, I removed it while trying to find out the cause of the error. Even with it in the error still gets thrown. — GuyMate, Mar 22 '22 at 17:36
As you get the error when you click on the card, chances are that the bug is inside the code of the function you try to call on click (`updatePokemonId`) — cheesyMan, Mar 22 '22 at 18:01
Does this answer your question? [Invalid hook call. Hooks can only be called inside of the body of a function component](https://stackoverflow.com/questions/56663785/invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-com) — isherwood, Mar 22 '22 at 19:05

score 0 · Answer 1 · edited Mar 22 '22 at 19:06

0

first thing :

<input **value =inputString** type='text' placeholder='Search For a Pokemon!' 
  onChange={updateInput}></input>

edited Mar 22 '22 at 19:06

isherwood

58,414
16
114
157

answered Mar 22 '22 at 19:03

Iyadchafroud

11
2

Your answer would be better with some explanation. Please see [answer]. – isherwood Mar 22 '22 at 19:06
i think what @GuyMate want to do is update pokemon on card click, not changing card with input – free bug coding Mar 22 '22 at 19:10

score 0 · Answer 2 · answered Mar 22 '22 at 19:09

@GuyMate here is my review:

first you should pass updatePokemonId to RenderPokemon Component.
Second e.target.value will always be undefined because divtags dont have values. only special html tags like inputs have value property.

So change the code of updateInput to update using the id:

  const updateInput = (e) => {
    const id= e.target.id.toLowerCase();
    setInputString(lowerString);
  }

Then you should pass it to the RenderPokemon component:

  <RenderPokemon input={inputString} updatePokemonId={updatePokemonId}/>

then you should use it the RenderPokemon component and use the name of the pokemon as id because each pokemon has unique id:

const RenderPokemon = ({ input, updatePokemonId }) => {
  const [rawPokemonList, setRawPokemonList] = useState([]);
  const getPokemonData = async (id) => {
    //Move this out somehow, to avoid calling on every render 
    try {
      const res = await fetch("https://pokeapi.co/api/v2/pokemon/" + id);
      const pokemon = await res.json();
      return pokemon;
    } catch (e) {
      console.log(e);
    }
  };

  const sortPokemonList = rawPokemonList.filter((poke) => {
    if(input === "") {
      return poke;
    } else {
      return poke.name.toLowerCase().includes(input)
    }
  })

  useEffect((i) => {
    const promises = [];
    for (let i = 1; i < 152; i++) {
      promises.push(getPokemonData(i));
    }
    Promise.all(promises).then((results)=>{
      setRawPokemonList(results);
    })
  }, []);

  return (
      (sortPokemonList).map(poke=>(
        <div className='card' onClick={updatePokemonId} id={poke.name}>
          <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}/>
          <div className='container'>
            <p>{poke.name}</p>
          </div>
        </div>
      ))
  )
}

export default RenderPokemon;

I'm getting this error: Invalid hook call. Hooks can only be called inside of the body of a function component

2 Answers2