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;