Generate A Random Number In React

Today we will show you how to generate a random number in React. Read on to find out what’s the best way for you.

Some ways to generate a random number in React

In this article, we will go through two ways to generate a random number in React. Stay tuned for more details on how to install these methods.

Using random-string library 

Random-string is a module developed to generate a random string. You can install it with the npm command below:

Terminal:

npm i random-string

Options:

• Options. length: number: the length of the string you get (FAULT:8).
• Options. numeric: boolean: will the string that comes out contain numbers (from 0 to 9)? true).
• Options. letters: boolean – if the string you get contains lower- and uppercase letters (from a to z) (DEFAULT: true).
• Options.special: boolean – if the string that comes out of this operation contains any of these special characters (!(DEFAULT: $%&*()_+|-=[]:;>?,./)false).
• Options. exclude: array – eliminates characters from the final string uppercase letters cannot be removed with lowercase letters.

Using the options listed above, you can easily generate a three-digit random number like the following code:

import React, { useRef } from "react";
const App = () => {
  const ref = useRef(null);
  var randomNumber = require("random-string");
  const handleClick = () => {
    var number = randomNumber({
      length: 3,
      letters: false,
      numeric: true,
      special: false,
    });
    ref.current.innerText = number;
  };
  return (
    <div>
      <h2>LearnShareIT</h2>
      <h3 ref={ref}>000</h3>
      <button onClick={handleClick}>Generate a random number</button>
    </div>
  );
};
 
export default App;

Output:

So after installing the random-string library, with some basic options such as length and characters, we can generate a random number with three characters.

Using Math.random() method

The Math. random() method will return a random number between 0 and 1, not including 1. However, to use it more realistically in this way, we will use it to generate a random number with two characters

Syntax:

Math.random()

Parameter: None

The Math. round() method has a rounding function. The method will return the nearest integer to the number provided when calling the method.

Syntax:

Math.round( number)

Parameter:

• Number: is the number to be rounded.

Code:

import React, { useRef } from "react";
 
const App = () => {
  const ref = useRef(null);
  const handleClick = () => {
    var min = 10;
    var max = 99;
    ref.current.innerText = Math.round(Math.random() * (max - min) + min);
  };
  return (
    <div>
      <h2>LearnShareIT</h2>
      <h3 style={{color: "red"}} ref={ref}>00</h3>
      <button onClick={handleClick}>Generate a random number</button>
    </div>
  );
};
 
export default App;

Output:

After we use the Math. random() method to generate a two-digit number with min equal to 10 and max equal to 99, we will use the Math. round() method to round it to an integer. Every time we press the Generate a random number button, a two-digit random number will be generated. I hope these methods will be helpful to you.

Summary

To summarize, there are many ways to generate a random number in React. After reading this article, we know some simple ways, like using the random-string library or the Math. random() method in JavaScript. Let’s try these methods. Good luck for you! 

Maybe you are interested:

• Get the Parent height and width in React
• How to generate Option tags for Select from an Array in React
• Capitalize the first letter of a String in React

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs