Hello, guys I’ve been working at this problem for a few hours now and after scouring my code and searching our forums, I think it’s time to ask for help.
The problem: When I edit a recipe for the second time, incorrect data is displayed.
My code is here: https://codepen.io/TheyLeftMe4Dead/pen/ModZve
I think that the problem roots from the Recipe referenced in the editingData object (In App Component) not being updated correctly. The editingData object is passed down as a prop like so:
App —> popupBackground —> popup.
When the user submits data (in the popup), I use a reference to the target Recipe to update its state like so:
(In popup) this.props.editingData.recipe.setState({…});
This does update the data on screen, but when I edit that recipe again, the popup displays the recipe’s default data, rather than the new data.
After Debugging, I found that the target Recipe was changing state and its reference (held by the App Component) was being updated. So, it was like Popup failed to receive this data somehow.
And on a side note, sometimes when Editing a Recipe, the whole application will just lock up. I’m not sure what causes this yet.
The “Journey” of the Recipe reference is like so:
Recipe —> RecipeContainer —> App —> PopupBackground —> Popup
If you can help me in any way or have any ideas or references I can look at, I’d be very grateful! Thanks a bunch in advance!