Create the QuoteBody Component

The QuoteBody.js component will contain every other thing apart from the navbar and footer

Inside the component subfolder in the src folder, create a file named QuoteBody.js

Import useState and useEffect hooks

import React, { useState, useEffect } from "react";
import { FaTwitter, FaRandom } from "react-icons/fa";

Import an image

import KantePic2 from "../images/p116594.png";

Declare an API variable to be used for the API call

const api = `http://localhost:5000/api/quotes`;

The rest of the codes are well commented so you can understand it. It look like this:

const QuoteBody = () => {
  const [quote, setQuotes] = useState("");
  const [author, setAuthor] = useState("");

  // Call Quotes API
  useEffect(() => {
    fetchQuotes();
  }, []);

  // Make the API request
  const fetchQuotes = async () => {
    try {
      const res = await fetch(api);
      const { quotes } = await res.json();

      console.log(quotes);
      // Get random quotes
      let randomNum = Math.floor(Math.random() * quotes.length);
      let randomQuote = quotes[randomNum];

      setQuotes(randomQuote.quote);
      setAuthor(randomQuote.author);
    } catch (error) {
      console.log(error);
    }
  };

  // Handleclick function that will fetch the quotes
  const handleClick = () => {
    fetchQuotes();
  };

  // The functionality for sharing quotes on Twitter
  let tweetURL = `https://twitter.com/intent/tweet?text=${quote} - ${author}`;

  return (
    <section className="quote-body">
      <div className="quote-container">
        <img src={KantePic2} alt="Kante" className="kante-bg" />
        <br />
        <div className="quote">
          <p className="quote-item">{quote}</p>
          <p className="quote-author"> – {author}</p>
        </div>
        <div className="quote-btn-container">
          {/* Twitter Button  */}
          <a className="btn tweet-btn" href={tweetURL} target="_blank">
            <FaTwitter /> Tweet
          </a>
          {/* Random quote Button  */}
          <button onClick={handleClick} className="btn quote-btn">
            <FaRandom /> New Quote
          </button>
        </div>
      </div>
    </section>
  );
};

export default QuoteBody;