Ran into a problem while making the Recipe Box with React

1

Hey guys
I cannot render anything using react, and I cannot figure out why.

Help me out please.

2

Wow - this is a tough oneā€¦I canā€™t find it either :confused: Itā€™s not making sense to me why itā€™s not renderingā€¦

The only thing I came up with (that may or may not be the issue) is in your RecipeBox component, the ā€˜classā€™ attributes should be ā€˜classNameā€™ for React. I see you have it correctly on your other components, so Iā€™m sure its just a simple mistake :slight_smile:

I had this happen to me once and I couldnā€™t find an error either, so I ended up creating a new pen and carefully copying and pasting pieces of code over to a new pen. I never found what was causing the errorā€¦

One other tip, add this to the top of your javascript, so when you run JSHint, it will recognize it as ES6.

// jshint esversion: 6

Hope this works out for youā€¦Iā€™m sorry I couldnā€™t be of more help :slight_smile:

3

I have a react codepen template, so I opened that and copy/pasted all your code, and got this far:

Iā€™ll let you debug the rest. The only change I made was to replace the inner contents of your ingredientLIst map. Iā€™m not sure why itā€™s not spitting out the ingredients because itā€™s getting the correct props. I used the world"test" and itā€™s printing those with the recipe just fine.

Then I retyped by hand the inner code with the div, paragraph and closing div tag.

I honestly donā€™t know how or why itā€™s any different than yours. No editing other than retyping the same code. Are you cutting and pasting from another editor that could be adding in some weird chars?

1 Like
4

Quick check in Chrome Developer Tool console says that the reactDOM doesnā€™t have a render method, which sounds crazy town until I check your external imports

You were using https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js, which if you click the link, youā€™ll find that itā€™s not really react-dom at all

Deleted that reference, quick add the default react-dom, and everything works perfectly. Well, not sure about perfectly, but things render nice and pretty

2 Likes
5

I got a different ā€œundefinedā€ error when I used console on his original pen. Good detective work!