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:
