Relative Content

Tag Archive for javascriptreactjsfetchhookreact-custom-hooks

custom hook fetches and returns the breed list when animal prop is valid & uses local cache animal prop is same as before are fail

Hi everyone. I have an exercise that needs to create a custom hook in react with below detail:
In the useBreedList.js file, you have to create a custom hook that will take the desired animal’s name by props and will be added to the API address. In response, it returns a list of available breeds for the desired animal.
In the Details component, by sending the name of the desired animal, we get the list of breeds from the custom hook and show it to the user.
Finally, this custom hook returns an array of three members, the first member of which is the list of races. The second and third members are the loading and error values.
Also, this custom hook must have the ability to cache or store information. This means that if we get the cat breeds once, we should not make a request to the server for the second time and read the information from the cache. Basically, if the name of the desired animal is the same as last time, there is no need to get the breeds from the server and we get the information from the same breeds before.
Custom Hook Tips:
Pay attention to the error value, if the animal props value is invalid, which causes an error from the server, finally the custom hook should return an empty array for races and true for error. For the loading value, be aware that whenever a request is sent to the server, whether it is successful or an error in the request, before the result is determined, the loading value must be set to true and after completion, it must be set to false.
Router tips:
When you run the npm install command, the react-router-dom package will be installed in the project, but if you look at the Animal.js file, you will notice that the Link elements do not point to an address and you need to complete it.
Hints
Be aware that the Details component should not receive any props as input, and you should also put the name of the desired animal in the h1 tag.
I wrote it, but it has 2 errors in testing and I don’t have the testing code to read and realize my problem. my code is bellow: