React rerendering error when fetching

JavaScript
1 
const Recipes = () => {
const [recipesList, setRecipesList] = useState([])
    
const url = "recipeapi.com/blabla";

    useEffect(() => {
        fetch(url)
          .then((resp) => resp.json())
          .then((data) => setRecipesList(data))
          .catch((err) => console.log(err));
     }, []);
   

if (recipesList.length !== 0) {
    return(
        <div className="recipes">
            <div>
                {recipesList ? <Recipe className="recipe" info={recipesList}/> : null }
            </div>
   
        </div>
    )
}
else {
    return(
        <h1>Loading</h1>
    )
}
    
}
export default Recipes;

This is my code, I am trying to fetch the recipe data from the api, but I am stuck with this rerendering error. I have no clue why it occurs.

2

What is the error? That would help.

3

When I try out your app, I get this in the network tab:

Request URL: https://cdpn.io/cp/internal/boomboom/recipeapi.com/blabla

  1. Request Method: GET

  2. Status Code: 404

The response is:

Cannot GET /cp/internal/boomboom/recipeapi.com/blabla

Usually the 404 means that it can’t find that endpoint. What endpoint are you trying to hit?

4

Not sure what you mean by a re-rendering error.

Are you sure data is an array and not an object? If it’s an object the length check fails.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.