Create A Navbar Component In React

react lift state navbar

In this tutorial we are going to add a NavBar component to the application we have been building in React. During this process we’ll need to do some refactoring in order to shift local state out of child components, and into the App parent component. By following this convention, we’ll need to raise events in the child components while handling them in the parent component. This allows our application to have a single source of truth. In other words, several components may reflect updates based on the same changing data. Let’s see how this works now.


Add The Navbar Component File

First off, we can add a new navbar.jsx file to the components folder we have been working with.
react navbar file

In the NavBar component we can add the following code. Notice we are using the props object to fetch the total number of items in the application so we can display them in the navigation area.


Reconfigure To Use App.js

We want to revert back to using App.js as the main component in the application. To do this, we can make an adjustment to index.js so that we now render <App/> instead of <Items/> like so.
index.js


Lifting The State In React

When working in React you’ll sometimes hear about lifting state up. The React docs describe this concept as follows.

Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor. Let’s see how this works in action.

In our case, that means we want to have the following application layout where the state now resides in the top level App component.

react lift state

To do this we needed to refactor all of the child components to move their state into the App component. Here is our new App component. At the top is the shared state, then we have the event handlers, and lastly the render() method. See the prior React Tutorials if you need a refresher on these concepts. In order to add up the total items as we increment, we make use of the JavaScript reduce() method.
App.js


Refactored Children Components

Since all the state and logic has been lifted up to the top-level App component, our <Items/> and <Item/> components are now more streamlined. In fact, they no longer even have any local state at all. If they need to work with data, they must get it via the props object. Additionally, in order to update data events are raised in the child and handled in the parent.

items.jsx

item.jsx


Shared State In Action

Now when we interact with the application we can see a few concepts in action. Clicking the increment button on each individual item adds to the count of that item. In addition, the NavBar component is now keeping track of the sum of all item values. Finally, we can click a button to reset all counters back to zero.


Further Reading


Create A Navbar Component In React Summary

In this tutorial we did some good refactoring to add a Navbar component to the application. We learned a bit about lifting up the state in react, as well as how to raise and handle events. If you haven’t already do check out the prior React Tutorials to see how we made it to this point.