React fetch request from external API after card click

Question

I have one small question. My app do fetch request after click on card. But I have some trouble. My fetch request doing everytime, but it must doing only after click. So my fetch request looks like this:

  useEffect(() => {
    let endpointForPokemonDetails = `${API_URL}${index}`;
    fetchPokemonDetails(endpointForPokemonDetails);
  });

  const fetchPokemonDetails = (endpointForPokemonDetails) => {
    fetch(endpointForPokemonDetails)
      .then((result) => result.json())
      .then((result) => {
        setPokemon([Pokemon, result]);
      }, setLoading(false))
      .catch((error) => console.log("Error:", error));
  };

Before I click to card, I have some errors in console.log:

Can you know, how to fix it?

Komo · Accepted Answer · 2020-04-06 20:48:18Z

1

Use onClick prop on your button (or any other HTML element):

<button type="button" onClick={() => fetchPokemonDetails(index)}>
Fetch pokemon
</button>

Also change fetchPokemonDetails to accept an index parameter:

 const fetchPokemonDetails = (index) => {
    fetch(`${API_URL}${index}`)......

useEffect is a React hook that is used to trigger side effects. See https://reactjs.org/docs/hooks-reference.html#useeffect

answered Apr 6, 2020 at 20:48

Komo

2,1381 gold badge23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

True · Accepted Answer · 2020-04-06 20:49:44Z

1

By using useEffect, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates

So the reason why you get the error is because you are using useEffect. This will call the API after render with index = undefined

You can remove useEffect method and call fetchPokemonDetails on onClickHandler

answered Apr 6, 2020 at 20:49

True

7366 silver badges24 bronze badges

Comments

Pankaj Pramanik · Accepted Answer · 2020-04-06 20:52:09Z

0

You can use only click event and so you use the function only after clicking , you should not use useEffect. useEffect had side effect .

answered Apr 6, 2020 at 20:52

Pankaj Pramanik

637 bronze badges

Collectives™ on Stack Overflow

React fetch request from external API after card click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related