-4

I am working on a project in React.js with this API https://dog.ceo/api/breed/.

I want to be able to handle the error, when the user inputs a dog breed that does not exists such as International space station.

I need your help on error handling.

Problem with the current code It thows an error imagesOfABreed is not a function

Here is a look at my code.


useEffect(() => {
    // get the images of the breed that is choosen
    const loadByBreed = async (value: string) => {
      
    if(!value) {
      setImagesOfABreed([]);
      return;
    }
      
      try {
        const response = await fetch(`https://dog.ceo/api/breed/${value}/images`)
        const data = await response.json()

        if (data?.status == "error") {
          setFetchError("breed not found")
          console.log(fetchError);
          setImagesOfABreed([])
          return
        }

        console.log(data)
        setImagesOfABreed(data.message)
      } catch (error) {
        const err = error as Error
        console.log(err.message)
      }
    }

    loadByBreed(debouncedQuery);

  }, [debouncedQuery])


return (

{fetchError && <p>{fetchError}</p>}

          { imagesOfABreed?.length ? imagesOfABreed.map((data) => {
            return (
              <Card key={data} img={data} />
            )
          }) : <p>Nothing</p>}


)
neil
  • 353
  • 1
  • 8
  • 17
  • 2
    What's wrong with the current code? – Konrad Mar 20 '23 at 20:12
  • *"I need your help on error handling."* - Please be more specific, see [Why is “Can someone help me?” not an actual question?](https://meta.stackoverflow.com/q/284236/328193) *"It thows an error imagesOfABreed is not a function"* - Nothing in the code shown attempts to invoke `imagesOfABreed` as a function. Which specific operation is producing this error? – David Mar 20 '23 at 20:15
  • @Konrad It throws an error saying `imagesOfABreed is not a function` This is because user enters a name of a breed that does not exist such as **Hamburger** – neil Mar 20 '23 at 20:15
  • @neil it would mean that you try to call `imagesOfABreed` as a function like: `imagesOfABreed()` but there is not code like this in the question – Konrad Mar 20 '23 at 20:16

2 Answers2

0

One thing you can actually do is first call and store all possible dog breeds locally, and then check if the user input is in that array. If not, don't send the request.

Make sure to check if the api has something like a get all breeds or something like that. The rest should be easy to implement!

Let me know if you have any answers!

Noubar K.
  • 124
  • 8
0

You will need to check the value type of imagesOfABreed and if it is an array then render the Card component through map. This is a safety check.

Change your code to this:

debouncedQuery && Array.isArray(imagesOfABreed) && imagesOfABreed?.length ? ...

Edit: If you want to handle the errors if dog breed is not a valid one, user input is empty etc, then you will have to handle it individually. Replace setFetchError("breed not found") with this:

if(data.message.startsWith('Breed not found')){
    setFetchError("breed not found");
}else if(data.message.startsWith('No route found')){
    setFetchError("breed name cannot be empty");
} else {
    setFetchError(data.message);
}
Phanisimha N R
  • 367
  • 1
  • 6