Learn React Hooks

Creating the HeaderBar component

First of all, we are going to refactor some contents of our App component into a HeaderBar component. The HeaderBar component will contain everything that we want to display on every page: the Header, UserBar, ChangeTheme, and CreatePost components.

Let's start creating the HeaderBar component:

1. Create a new folder: src/pages/.
2. Create a new file, src/pages/HeaderBar.js, import React (with the useContext Hook), and define the component there. It will accept the setTheme function as prop:

import React, { useContext } from 'react'export default function HeaderBar ({ setTheme }) {   return (        <div>        </div>    )}

3. Now, cut the following code from the src/App.js component, and insert it between the <div> tags of the ...