Random Quote Generator in React

This article demonstrates how to create a Random Quote Generator in React.

This code features two React components: RandomQuoteGenerator.js and App.js, showcasing a simple application that generates random quotes. Let’s break down each part:

RandomQuoteGenerator.js

import React, { useState } from 'react';
const quotes = [
  "The only limit to our realization of tomorrow will be our doubts of today. - Franklin D. Roosevelt",
  "Do not wait to strike till the iron is hot, but make it hot by striking. - William Butler Yeats",
  "It always seems impossible until it's done. - Nelson Mandela",
  // Add more quotes as needed
];
const RandomQuoteGenerator = () => {
  const [randomQuote, setRandomQuote] = useState('');
  const generateRandomQuote = () => {
    const randomIndex = Math.floor(Math.random() * quotes.length);
    setRandomQuote(quotes[randomIndex]);
  };
  return (
    <div>
      <h1>Random Quote Generator</h1>
      <blockquote>{randomQuote}</blockquote>
      <button onClick={generateRandomQuote}>Generate Quote</button>
    </div>
  );
};
export default RandomQuoteGenerator;

In the RandomQuoteGenerator component, a functional component is defined. It uses the useState hook to manage the state of the randomQuote variable, initially set to an empty string. The component includes an array of quotes, and when the “Generate Quote” button is clicked, it triggers the generateRandomQuote function. This function generates a random index within the range of the quotes array and updates the randomQuote state with the selected quote. The rendered output includes a heading, a blockquote displaying the randomly generated quote, and a button to trigger the quote generation.

App.js

// App.js
import React, { useState } from 'react';
import RandomQuoteGenerator from './RandomQuoteGenerator';

function App() {

  return (
    <div className="App">
     <RandomQuoteGenerator />
     </div>
  );
}
export default App;

In the App component, the RandomQuoteGenerator component is imported and rendered within the main application. This structure demonstrates the composition of smaller, reusable components within a larger React application. The RandomQuoteGenerator component can be used independently to add a random quote generator feature to different parts of the application or other projects.

In summary, this code illustrates a straightforward React application that generates random quotes using the RandomQuoteGenerator component. The App component serves as the entry point for rendering and incorporating the quote generation functionality into the overall React application.

Output

**Implementing a Random Quote Generator in React**

RandomQuoteGenerator.js

App.js

Further Reading