Ran into a problem while making the Recipe Box with React

Ran into a problem while making the Recipe Box with React
0

#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?


#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


#5

I got a different “undefined” error when I used console on his original pen. Good detective work!