Random Number generator ReactJs

We are going to make a random number generator where the user indicate the range.
This is the code

Create our app with CRA

npx create-react-app random-number-generator

We write a simple structure for our app.

App.js

import React from 'react';

export default function App() {
  return (
    <div>
      <h2>Random Numbers</h2>
      <input type="text" />
      <input type="text" />

      <button>Random Number</button>
    </div>
  );
}

Then add state

import React from 'react';
import './style.css';
import { useState } from 'react';

export default function App() {
  const [minRange, setMinRange] = useState(0);
  const [maxRange, setMaxRange] = useState(0);
  const [randomNumber, setRandomNumber] = useState(0);
  return (
    <div>
      <h2>Random Numbers</h2>
      <input
        type="text"
        value={minRange}
        onChange={(event) => setMinRange(+event.target.value)}
      />
      <input
        type="text"
        value={maxRange}
        onChange={(event) => setMaxRange(+event.target.value)}
      />

      <button>Generar número aleatorio</button>

    </div>
  );
}

And the final code looks like this:

import React from 'react';
import './style.css';
import { useState } from 'react';

export default function App() {
  const [minRange, setMinRange] = useState(0);
  const [maxRange, setMaxRange] = useState(0);
  const [randomNumber, setRandomNumber] = useState(0);

  function randomGenerator() {
    //const a = minRange;
    //const b = maxRange;

    setRandomNumber(randomNumberInRange(minRange, maxRange));
  }
  function randomNumberInRange(min, max) {
    // 👇️ get number between min (inclusive) and max (inclusive)
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  return (
    <div>
      <h2>Random Numbers</h2>
      <input
        type="text"
        value={minRange}
        onChange={(event) => setMinRange(+event.target.value)}
      />
      <input
        type="text"
        value={maxRange}
        onChange={(event) => setMaxRange(+event.target.value)}
      />

      <button onClick={randomGenerator}>Generar número aleatorio</button>
      <p> {randomNumber}</p>
    </div>
  );
}

Add a form

import React from 'react';
import './style.css';
import { useState } from 'react';

export default function App() {
  const [minRange, setMinRange] = useState(0);
  const [maxRange, setMaxRange] = useState(0);
  const [randomNumber, setRandomNumber] = useState(0);

  function randomGenerator(event) {
    event.preventDefault();
    //const a = minRange;
    //const b = maxRange;

    setRandomNumber(randomNumberInRange(minRange, maxRange));
  }
  function randomNumberInRange(min, max) {
    // 👇️ get number between min (inclusive) and max (inclusive)
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  return (
    <div>
      <h2>Random Numbers</h2>

      <form onSubmit={randomGenerator}>
        <input
          type="text"
          value={minRange}
          onChange={(event) => setMinRange(+event.target.value)}
        />
        <input
          type="text"
          value={maxRange}
          onChange={(event) => setMaxRange(+event.target.value)}
        />
        <button type="submit">Generar número aleatorio</button>
      </form>

      <p> {randomNumber}</p>
    </div>
  );
}

Blog

Random Number generator ReactJs

Baldo Bo

Join Our Newsletter. No Spam, Only the good stuff.

Related