Random Number generator ReactJs
Tags: react, javascript, beginners, hooks
Published: 2022-11-08 04:39:21

We are going to make a random number generator where the user indicate the range.
[This is the code](https://stackblitz.com/edit/react-uxfsdg?file=src/App.js)

Create our app with CRA

```
npx create-react-app random-number-generator
```
We write a simple structure for our app.

App.js

```javascript
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

```javascript
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:

```javascript
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

```javascript
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>
  );
}
```