Step 3: Navigation Component

Inside the components/ folder, create Navigation.js .

The Navigation component, for now, only requires one prop: the list of recipes.

2. Include the Navigation component in App.js

Inside App.js , import Navigation.js and include it in the render() function.

, import and include it in the function. Add a recipes prop and pass the list of recipes from the state.

3. Back in Navigation.js , let’s render the recipes as buttons.

Loop through each recipe in the array and dynamically generate an element.

4. Now, let’s develop the logic for showing the correct recipe when its respective navigation button is pressed.

In App.js , create a new state called selectedRecipe . This will contain the id of the recipe that’s currently being shown. We can set the initial state to null for now.

, create a new state called . This will contain the id of the recipe that’s currently being shown. We can set the initial state to for now. Inside of the render function, we only want to create a <Recipe> component for the recipe which is currently selected. We can use the array.filter() function for this.

This works great, except that our initial state value for selectedRecipe is null , so let’s wrap the above statement in an `if` statement to ensure that `this.state.selectedRecipe` is defined.

if(this.state.selectedRecipe) { ... }

Additionally, the filter() function returns an array of items fitting that description. So let’s introduce a local variable called recipeToSelect .

We’ll declare it before the if() statement we just wrote, and if the filteredRecipes returned at least one item, we’ll assign it to the first value found (it should only return one, so this is more of an edge-case check).

Now, we can check if recipeToSelect has a value. If it does, render the <Recipe> component with that id, otherwise, just return null.

5. Next, we want to initialize our app with the first recipe, so let’s add a componentDidMount() lifecycle function.

If there is a recipe in the recipes state array, set the state of selectedRecipe to its id .

7. The last thing we need to do is update which recipe is shown when a navigation button is clicked.

Inside App.js , let’s create a function which sets the selectedRecipe state to the selected recipe.

Underneath the constructor, add a function called selectNewRecipe . This will take one argument recipeId and update the state if this value exists.

This looks great, except for one thing: we need to bind this function to App . Otherwise the this context will be all wrong.

Inside the constructor, add a binding for selectNewRecipe .

Cool! So how do we get the child component (Navigation) to call this function when a button is clicked?

Pass this function as a prop to Navigation.

We have just created a reference to this function in the form of a prop.

Inside Navigation.js , let’s add an onClick handler to the buttons.

When each button is clicked, it will call the changeRecipe function. So let’s create that now.

This function will take in the e (event) and grab the id for the clicked Recipe. Then, it will pass this id to the parent function in order to update the state.

And just as we did in App.js to bind the function, we have to do that here as well. So let’s create a constructor function and bind that value.

Also update propTypes in Navigation to include the passed function.

Awesome! Your app should now render the correct components!

Here are the completed files for App.js and Navigation.js :

And this is what our app currently looks like.

Step 4: Styles

Okay, I’ll admit, this app doesn’t look so pretty. So let’s give it some styles. You can style your app however you’d like. I just create a new scss partial for each component’s Sass and import it into index.scss .

Styling the Selected Navigation Item

One important thing we have to do is style the selected navigation item. To do this, we have to pass the selectedRecipe state to the <Navigation> component as a prop.

Next, add a ternary to the className attribute in Navigation.js . If the id of the navigation item is equal to the selected recipe, give it an active class in addition to the base class.

Here’s what our styled app looks like.

Conclusion

I know this isn’t a super fancy app, but it’s a great learning exercise for beginners to React.

I like this app idea, as well because I have a TON of recipes that I need to keep track of.

You can even host this through GitHub and send it to your friends and family!