Recipe Box: Edit Recipe Problem

Hello, guys I’ve been working at this problem for a few hours now :sleepy: 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!

I just found my problem. I was trying to access the state of a sibling component by using setState. When I changed the state of the recipeList in the App component instead, (and fixed things here and there) everything worked like a charm.

It looks like React you can’t break React’s encapsulation.