how to create random number with click event in react

Question

I want to create random numbers from 1 to 50 when I click the button. So here is my component for this:

import React from 'react'
import './Board.css';

const Board = () => {
    let rand;
    function createNumber() {
        rand = Math.floor(Math.random() * 50) + 1;
    }
    return (
        <div className="game-board">
            <div id="selected-number">
                <h1 className="bingo-ball__text">{rand}</h1>
                <button className="button button3" onClick={createNumber}>Select Number</button>
            </div>
        </div>
    )
}

export default Board

But when I click, I cannot get any response (so I dont see anything inside of this {rand}) or error.

React have a heavy emphasis on "state" and "effect", would recommend check out react bate docs — Enfield Li
– Enfield Li, Commented May 31, 2022 at 10:21

Reinier68 · Accepted Answer · 2022-05-31 10:16:04Z

2

You should use the react hook useState so that your component gets re-rendered when you generate a new random numer like so:

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [rnd, setRnd] = useState(0);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={() => setRnd(Math.floor(Math.random() * 50))}>
        gen randomn num
      </button>
      <div>{rnd}</div>
    </div>
  );
}

Example: https://codesandbox.io/s/black-pine-5sgxxw?file=/src/App.js:0-349

answered May 31, 2022 at 10:16

Reinier68

3,4444 gold badges39 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to create random number with click event in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related