Many quote requests are available online. The purpose of this article is to teach beginners in React, the steps to create a simple random quote generator application.

We will use a third-party API that returns a random quote. Our job is to retrieve the API when the application loads, store the quote in the report, and display it.

The Refresh button is used to recall the API and display another quote.

Another feature we will implement in our application is copy to clipboard. Pressing this button will copy the quote shown on the screen and the author’s name to our system’s clipboard.

I will also provide a link to a demo of the application we will be creating.


This article is for those who are new to React. To follow this, the reader should have a basic understanding of the React.js library. Otherwise, you can find information on the official React.js website.

Read the article Simple Multilingual Website with React Hooks to understand the basic idea of React and create a simple application with it.

What we learn

After completing this guide, we will know ,

  • To make a draft answer.
  • Creating a custom part
  • Using the hardware interface in our project
  • Working with third party APIs

Random quote generator with feedback

So we start the project. I don’t provide an exact screenshot of each step.

For better understanding, I give the file structure of the application.

1. Creating a new reaction project

The first step is to configure the React application on your system. This can easily be done with the NPX tool.

So, first install Node.js on your system and create a responsive application using NPX. Don’t worry about the term NPX, as it is a tool that comes with NPM (Node Package Manager) 5.2+ and installs Node.js itself on your system.

If you need help installing React on your system, use the links below.

Installing React on Windows, Ubuntu and MacOS

npx response to the creation of an application response-random-quotes

This command creates a reactive application with a repeating project name in quotes

Now go to the project directory and start the application.

Response CD Random Quotes
Start in a Minute

In the browser window, the React application we created opens with the address https://localhost:3000. The port may be different if 3000 is busy.

We can now use our favorite code editor to modify our project. Personally, I recommend Visual Studio Code.

2. Define and customize user interface hardware

In the previous articles, we used Bootstrap to create a React application style. In this article, however, we will use a tangible user interface. So install the hardware interface components with NPM.

npm i @material-ui/core
npm i @material-ui/lab
npm i @material-ui/icons

3. Create a map component to display a citation

Our application consists of a single component called Card. We show the quote, the author, a button to copy to the clipboard, and a button to update the quote in this folder.

This means that all logical parts of the application come from the map component.

The implementation of this board in our application is very easy, since we already have a board component in the hardware interface. View the code or copy it to our application.

3.1 Importing all packages and components

We want to import packages and components and use them in the component directory.

  • Import React first, then use theEffect hook to get our third-party API right after installing the map component, and use theState hook to handle all the states of that component.
  • Prebuilt UI components like Card, CardContent, CardActions, IconButton, Typography have been imported from @material-ui/core.
  • Import makeStyles from @material-ui/core/styles to add custom styles to Material UI components.
  • The skeleton is imported from @material-ui/lab to display the loader when receiving the result of the API retrieval.
  • The icons are imported from @material-ui/icons.
  • Finally, import the axios package to handle external http requests more easily.

import React, { useEffect, useState} from React ;

import {
} from @material-ui/core;
import { makeStyles } from @material-ui/core/styles ;
import { skeleton} from @material-ui/lab;
import {
FileCopy as FileCopyIcon,
Refresh as RefreshIcon,
} from @material-ui/icons ;

axioms imported from axio ;

3.2 Defining user styles

We use makeStyles to add custom styles to UI components. It was added outside of our feature module.

const useStyles = makeStyles() => ({
root : {
maxWidth : 500,
minHeight : 100,
content : {
fontSize : 1rem,
}, author
: {
marginTop : 12,
fontSize : .8rem,
errorMessage: {
color: red,
text alignment: middle,
fontSize: 15px,
footer: {
display: flex,
justificationContent: space between,
quoteCopiedMessage: {
color: green,
fontSize: 13px,
marginLeft: 10px,

This is called in our function as class = useStyles().

3.3 Declaring states with useState

Now let’s run the QuoteCard() function and declare all the states.

  • Quote status to save a quote that has been revalidated by an API request.
  • The error message is stored in the errorMessage report.
  • Loader status to switch from the Loader view to the Data view.
  • After copying the quote, a success message should appear. The citing state will do this.

const [quote, setQuote] = useState({});
const [errorMessage, setErrorMessage] = useState();
const [loadQuote, setLoadingQuote] = useState(false);
const [quoteCopied, setQuoteCopied] = useState(false)

3.4 Randomly retrieve quota from API

We can extract data from a third-party API with axioms. So we get the API of the fetchRandomQuote() function.

Since we are using wait to solve the promise, we need to declare the fetchRandomQuote() function asynchronous.

asynchronous function fetchRandomQuote() {
try {
const quoteObject = waitts axios.get(;
} catch (error) {

The function retrieves a random quote in the format shown below.

{_id:sAqRoYN_WRkP,tags:[famous-quotes],content:The more we dwell on our misfortunes, the more they have the power to harm us,author:Voltaire,authorSlug:Voltaire,length:78}

This object is stored in a state called quote with setQuote.

It should show a random quote immediately after installing our application. So we can use the useEffect hook.

useEffect() => {
}, []) ;

The fetchRandomQuote() function is executed immediately after the map component is loaded.

3.5 Function to copy a quotation to the clipboard

We have a Copy to Clipboard button in the quote folder. The function copyQuote() is called.

copyQuote() {
navigator.clipboard.writeText(quote.content + – +;

3.6 Determining the inside view of the card hardware interface component

We can now code the view in the Material UI Card component. While loading it, he bumped into Skeleton’s forklift. Otherwise, it reflects the content and author in the subject of the quote. If it is not present, an error message is displayed.

A Copy to Clipboard button and a Refresh button appear at the bottom of the chart.



) : quote.content ? (


– (

) : (


{ “quote copied to clipboard” }

) : (




The full code of the sign part looks like this.

4. Code App.js

In App.js, we import the Map component. Since we need to display this map component in the center of our application, we use the UI material grid for alignment.

So, the full App.js code would look like this.

Coding record

You can view the application live via the CodeSandbox link.


You can always go to the GitHub repository to clone this project.


Here we have discussed the steps to build a random quote generator application using React. In addition to building the application, I focused on teaching the methods through an external API and using the user interface in our application.


How do you load…

You might like this.

react random quote generator,random quote generator javascript,random quote machine (react),generate random text in react,random word generator react,quote generator react hooks,Privacy settings,How Search works,front end libraries projects – build a random quote machine,random quote api

You May Also Like

ūü•á¬†Configure AutoResponder for Telegram¬† Step by Step Guide ‚Ė∑ 2021

This messaging application is mainly characterized by offering a large number of…

No Sleep Option In Windows 10? 9 Ways To Solve The Issue

Sleep mode is one of the most important features offered by Windows…

ūü•á¬†Make Voice Calls on Telegram¬† Step by Step Guide ‚Ė∑ 2021

Telegram is a platform that excels by constantly introducing new features for…

ūü•á¬†Data Types in Arduino¬† What are they? + List ‚Ė∑ 2020

If you like electronics and programming, you will be interested to learn…