If useSWR is dependent on state, the return values are undefined

[mustafa-hanif]

const Pokemon = () => {
  const [pokemon, setPokemon] = useState(null);

  const loadPokemon = (url) => setPokemon(url);

  const { data, error } = useSWR('https://pokeapi.co/api/v2/pokemon', fetch);
  const { pokemonData, pokemonError } = useSWR(pokemon, fetch);
  
  // This is null
  console.log(pokemonData, pokemonError)
  
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  return <div>{data.results.map(pokemon => {
    return <h2 key={pokemon.name} onClick={() => loadPokemon(pokemon.url)}>{pokemon.name}</h2>
  })}

  </div>
}

Don't know what I am doing wrong. But the second useSWR is always undefined, even though I see the network calls going through.

[mrceperka]

Hello, please try this

const { data: pokemonData, error: pokemonError} = ...

[mustafa-hanif]

That works thank you so much