Stateless functional components

As the name implies, functional components are really just functions. If a component doesn't require any state, lifecycle hooks, or basically any class-specific behavior or state, it is preferable to implement it as a functional component. Previously, you implemented the header component as a class component. The header implements nothing but the render method, a definite clue that it can be a functional component instead.

 

Now, implement the header component as a functional component by replacing the entire content of Header.js with the following:

import React from 'react';
import './Header.css';
import headerLogo from '../../../assets/logo.png';

const Header = (props) => (
  <header className="app-header app-bg">
    <div className="maxHeight flex flex-align-items--center">
      <img src={headerLogo} className="app-logo" alt="logo" />
      <span className="app-slogan">Shop 'till you Drop</span>
    </div>
  </header...