Problems with React Recipe Box

1

Problem 1

  • I have an add recipe method which works great with one exception
  • The new recipe appears instantly but the accordion tab it is in cannot be opened until the page is reloaded

EDIT PROBLEM TWO IS FIXED

Problem 2

  • I have a delete method which works so so
  • The recipe disappears from the DOM as soon as you hit the button
  • However when the page is reloaded it reappears…it is not being erased from localstorage
  • However when I delete two recipes in a row and reload, the more recently added one is deleted from local storage
  • I am using an index prop and filter to handle the recipe deletion

I am somewhat of a newb to React and things in general so I want to get these problems understood and dealt with before I even attempt an edit method

I decided to make a slightly more complicated version than the example… my recipes will have a url key eventually for a photo and my ingredients key is two part…but that function went in okay…they also have instructions…but that is not important…what is important is what I am missing and why my app is behaving this way

Thanks to anyone that takes the time to look.

My Recipe Box on Codepen

I should also add - Let me know if you get the same behavior even if you can’t help!

2

React setState is actually somewhat asyncronous. Take a look here for an explanation.
So if you change code in your deleteRecipe method from

localStorage.setItem(localStorageKey, JSON.stringify(this.state.recipes));

to

localStorage.setItem(localStorageKey, JSON.stringify(newRecipeState));

everyhting will work fine.

1 Like
3

okay…ill read up…i have noticed weird behavior of setState…i had to use a setTimeout in another app because something i did right after setState was happening too fast…im a newb but the asynchronous nature of setState is why i had to do that??..i think it was a call to a method that did an ajax request…anyway thanks for the help ill try it out