How to Generate Random Number in React.js ?

0 0 2 minutes read

In this article, we are going to see how we can generate a random number using React.js. To generate a random number, we are going to use the Math.random() Method.

The math.random() method in JavaScript returns a random number between 0 (inclusive) and 1 (exclusive).
The Math.floor() function in JavaScript is utilized to round off a given input number to the nearest smaller integer in a downward direction. In other words, it truncates the decimal part of the number.

Prerequisites:

Syntax:

Math.random();

Steps to Create React Application:

Step 1: Create a react application by using this command

npx create-react-app react-project

Step 2: After creating your project folder, i.e. react-project, use the following command to navigate to it:

cd react-project

Project Structure: It will look as follows:

Project Structure

Example: In this example, the function “App” creates a state variable named “num” and its update function “setNum” using the useState hook with an initial value of 0. The App function has a “randomNumberInRange” helper function that generates a random number within a specified range. It takes a minimum and maximum value as inputs. A component shows a “wrapper” div with an h2 element that displays the current “num” state value. Clicking a button inside the wrapper triggers the handleClick function, which updates “num” with a random number between 1 to 20.

In the CSS code, style a “.wrapper” class with padding, and text-align. It styles “h2” and “button” elements with various properties including hover effects.

Step 3: Open the App.js file. Simply paste the source code into the App.js file.

Javascript

import React, { useState } from "react"; 
import "./App.css"; 
const App = () => { 
    const [num, setNum] = useState(0); 
  
    const randomNumberInRange = (min, max) => { 
        return Math.floor(Math.random()  
                * (max - min + 1)) + min; 
    }; 
  
    const handleClick = () => { 
        setNum(randomNumberInRange(1, 20)); 
    }; 
  
    return ( 
        <div className="wrapper"> 
            <h2>Number is: {num}</h2> 
            <button onClick={handleClick}> 
                Click Me Generate 
            </button> 
        </div> 
    ); 
}; 
  
export default App;

CSS

.wrapper { 
    padding: 20px; 
    text-align: center; 
} 
  
h2 { 
    font-size: 24px; 
    margin-bottom: 10px; 
} 
  
button { 
    background-color: green; 
    color: white; 
    padding: 10px 20px; 
    border-radius: 5px; 
    border: none; 
    font-size: 16px; 
    cursor: pointer; 
} 
  
button:hover { 
    background-color: #3e8e41; 
    box-shadow: 1px 1px 10px 1px rgb(185, 185, 185); 
    transform: translate(0px, -2px); 
}

Step 4: To run the application, open the Terminal and enter the command listed below.

npm start

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!