Help! React Recipe Box, not rendering on mobile

Help! React Recipe Box, not rendering on mobile
0

#1

I just finished my Recipe Box project and I tried coding some media queries to test it’s appearance on my phone, and the only thing that rendered was the background color. I commented out the queries…same things. Here’s my pen: http://codepen.io/codeFuChivy/pen/ObYaZy I had a really hard time with this one, hence the atrocious code.


#2

So, you call JSON.parse(localStorage.getItem("recipe-storage")) a lot, but only the first time do you do any sort of check in case localStorage doesn’t contain that item. One of the many other times you make that call is where your problem lies.


#3

Thanks for your response! I’m still not 100 percent with understanding the storage object, nor react in general. My understanding was that I only had to check once with the initial render, and from there it will keep updating with the setItem function called in the if block.


#4

You’re doing it right, at least the first time. Once you have the item from localStorage, you should only refer to the variable that you stored that item in (this.state.recipes in your case). Every time you call localStorage.getitem(), it’s checking the local storage for that item. You’re very close :thumbsup:


#5

Worked like a charm! Thanks a lot for the suggestion.