Inside the components subfolder, create a file and name it Footer.js

Our footer component contains some text and two buttons to fetch random quotes and contact the developer:

import React from "react";

const handleClick = () => {
  return window.location.reload();
};

const Footer = () => {
  return (
    <section className="footer">
      <div className="footer-items">
        <p>
          Made with the MERN Stack by Kolade Chris Ksound, <br />
          Web developer and Technical Copywriter focusing on frontend
          technologies and passionate Chelsea FC supporter. <br /> Dedicated to
          N'golo Kante.
        </p>
        <ol>
          <li>
            <a href="#" onClick={handleClick}>
              Random Quote
            </a>
          </li>
          <li>
            <a href="https://twitter.com/koladechris">Contact Developer</a>
          </li>
        </ol>
      </div>
    </section>
  );
};

export default Footer;