Currently working on the Recipe Book project. I’m using the react-bootstrap module to use the modals when the user wants to edit or create new recipes. Here is the code https://github.com/DanStockham/RecipeBox/blob/master/src/App.js
The issue I’m running into is the props are not being updated in the “Recipe” component’s state. Another issue I am running into is when I try render the contents of the state property, even though there is a truthy value, I still get errors stating it is null. I tried looking at several tutorials, but I’m not fully understanding them. I’ve been at this for several days and haven’t been able to progress.
Any advice would be appreciative 
Think of props as the inputs for other components to plug into. Your Recipes component has only one prop: recipeNames (key and refs are not accessible via props). Your Recipes component thus has access to this.props.recipeNames, but I don’t see you referencing it anywhere. Also, new props will be passed only when the App component gets rendered, which is most often triggered by either a parent component updating, or a call to this.setState().
This can be really confusing. Keep in mind that Facebook’s ultimate goal with React and Flux is to make data flow one way, ideally from the top-most component (App, in your case), to the bottom-most.
@PortableStick Can I clarify my understanding of this with you?
When you say data flows one way and ideally you have data flow from the top to bottom, does that mean that if I wanted to call an API (camper leaderboard in this case) I would call the API in top level component (like Page), create the appropriate object there, and then pass the data in that object as props through all the necessary child components?
In short, yes, absolutely. You want all of that data to be stored and manipulated in one place, then passed to dumb containers that will only display it. Any buttons that manipulate the data (such as sorting) should have their functions passed via props as well, such that they are calling on the top level (or more generally, stateful) component’s code rather than doing something and then trying to pass data along.
Thanks for that.
React is still melting my head at the moment, so every snippet of wisdom helps 
Wouldn’t this.setState() be similar to assigning something to a state object? for instances
this.state.something = 'something else';
Also, how would I get my App component to update when there is a change in the recipe list from my local storage?
You’ll want to read the relevent documentation on this one, but basically, no. You’d have to call this.render() to force the component to re-render in order to make it roughly equivolent to this.setstate(), but you really ought to just use the function that React provides for this.