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
Implementing a Random Quote Generator in React

Further Reading

Introduction to React JS

How to Create Class Components in React?

Examples of Array Functions in PHP

Exploring PHP Arrays: Tips and Tricks

Basic Programs in PHP

Registration Form Using PDO in PHP

Inserting Information from Multiple CheckBox Selection in a Database Table in PHP

PHP Projects for Undergraduate Students

Architectural Constraints of REST API

REST API Concepts

Creating a Classified Ads Application in PHP

How to Create a Bar Chart in ReactJS?

programmingempire

princites.com