Need help with Build a Recipe Box

1

I’ve been working on this project, and at some point the page stopped working, I have no idea of why, but the app component doesn’t seem to load.

This is the code: https://glitch.com/edit/#!/luxurious-recipe-box

Thanks in advance for the answers

2

Hi and Welcome :slight_smile:!

Did You check the developer tools? There are a few errors and warnings:

Warning: Failed prop type: The prop `name` is marked as required in `FontAwesome`, but its value is `undefined`.
    in FontAwesome (at App.js:159)
    in Tools (at App.js:103)
    in div (at App.js:101)
    in div (at App.js:100)
    in App (at src/index.js:7) checkPropTypes.js:20

The above error occurred in the <IndexBox> component:
    in IndexBox (at App.js:102)
    in div (at App.js:101)
    in div (at App.js:100)
    in App (at src/index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. react-dom.development.js:21704

The above error occurred in the <RecipeBox> component:
    in RecipeBox (at App.js:107)
    in div (at App.js:100)
    in App (at src/index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. react-dom.development.js:21704

TypeError: recipes is null App.js:130
TypeError: this is undefined App.js:173
TypeError: recipes is null App.js:130
3

Thanks!
I found the problem, I changed some class component to functional ones and forgot to remove all references to “this”

2 Likes
4

Happy to help :slight_smile:.

By the way, if You haven’t already, FontAwesome uses name instead of className.