Next, let's clean up our ugly header, which will also require us to remove some of the code we wrote earlier to experiment with JavaScript syntax! Currently, our header is our own pre-rolled thing but it's not very good-looking as it is right now. We'll want to take advantage of the Navbar and NavbarBrand components that reactstrap provides to us as part of its standard exports! Open up src/App/App.js, and we're going to start modifying the file pretty significantly:

1. We'll start off by adding our Navbar and NavbarBrand imports at the top:

import { Navbar, NavbarBrand } from "reactstrap";

2. Next, we can remove all of the header configuration objects, since we won't need any of them after we're done editing this file. Instead, we'll just replace it with a single headerTitle variable:

const headerTitle = "Todoifier";

3. Next, we'll need to replace our headerDisplay function, since it is going to be using the new reactstrap component instead of the previous code we had in place:

const headerDisplay = (title) => (
  <Navbar color="dark" dark expand="md">
    <NavbarBrand href="/">{title}</NavbarBrand>
  </Navbar>
);

Notice that, now, header only accepts a passed-in title instead of the huge configuration object we were using earlier. This simplifies our code pretty significantly! We'll also need to change the call in our App component to our header function:

const App = () => (
  <div className="App">
    {headerDisplay(headerTitle)}
    <br />
    <TodoList />
  </div>
);

4. Save it and we should have a significantly cleaner header in our project! Refer to the following screenshot: