Random number using React.js

Question

I wrote this code, but when I run it, I only get a blank page. What is wrong? It does seem that I am close to the answer. I've tried everything, but it is still not working.

class Button extends React.Component {

  constructor(props) {
   super(props);
   this.state = {
   random: 0
    }
   }


   render() {
   var min = 1;
   var max = 100;
   var rand =  min + (Math.random() * (max-min));
   handleClick() {
    this.setState ({this.state.random + this.rand})
   }
    return (
      <div>
       <button value="Click me!" onClick={this.handleClick.bind(this)></button>
       </div>
      );

 React.render(<Button />, document.querySelector('#container'));

  }
}

JSFIDLLE: https://jsfiddle.net/1cban4oy/12/

Your snippet is not valid JS. You've got your handleClick function inside render somehow, and React.render is inside the Button. — loganfsmyth
– loganfsmyth, Commented Jul 18, 2017 at 19:56
are you really trying to run JSX in the browser? are you transpiling it? what errors appear in your browser's console? — Dan O
– Dan O, Commented Jul 18, 2017 at 20:00
Help us reproduce your problem. JSX usually requires some HTML loading the page, etc. Please add everything you need to reproduce the issue to a well known javascript REPL (like jsbin) and give us the link to that. — Dan Esparza
– Dan Esparza, Commented Jul 18, 2017 at 20:06

Rodrigo · Accepted Answer · 2017-07-18 20:13:42Z

Remove all your logic from the render function and add it to the click handler method. Also the onClick is missing a curly bracket at the end. Finally you're not indicating the state property you're updating in the setState() method.

This basically seems to do what you're after: https://codesandbox.io/s/98n9EkEOJ

This is the code just in case:

import React from 'react';
import { render } from 'react-dom';

class Button extends React.Component {

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = { random: 0 };
  }

  handleClick() {
    const min = 1;
    const max = 100;
    const rand = min + Math.random() * (max - min);
    this.setState({ random: this.state.random + rand });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>Click</button>
        <div>The number is: {this.state.random}</div>
      </div>
    );
  }
}

render(<Button />, document.getElementById('container'));

kind user · Accepted Answer · 2017-07-18 20:12:55Z

9

Firstly, you didn't set the state properly.
Secondly, use arrow functions so you can avoid problematic binding.
Thirdly, you didn't display the random value anywhere.
Lastly - you can move the min and max variables outside the render function. Also the whole math logic responsible for rolling a random number can be moved into the handleClick function.

Working code:

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      random: null,
    }
  }

  min = 1;
  max = 100;

  handleClick = () => {
    this.setState({random: this.min + (Math.random() * (this.max - this.min))});
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
        {this.state.random}
      </div>
    );
  }
}

edited Jul 18, 2017 at 20:12

answered Jul 18, 2017 at 20:07

kind user

42k8 gold badges69 silver badges78 bronze badges

1 Comment

Dan Esparza Over a year ago

I like the tip on using arrow functions -- thanks! I normally solve that using this.handleClick = this.handleClick.bind(this); in the constructor. The arrow method is much cleaner!

Andrii Starusiev · Accepted Answer · 2018-05-22 15:58:14Z

6

Try this:

class Button extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            random: null
        };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        const min = 1;
        const max = 100;
        const random = min + (Math.random() * (max - min));
        this.setState({ random })
    }
    render() {
        return (
            <div>
                <button value="Click me!" onClick={this.handleClick}>{this.state.random}</button>
            </div>
        );


    }
}
React.render(<Button />, document.querySelector('#container'));

edited May 22, 2018 at 15:58

answered Jul 18, 2017 at 20:10

Andrii Starusiev

7,7942 gold badges31 silver badges40 bronze badges

Comments

Ali Faris · Accepted Answer · 2017-07-18 20:02:55Z

3

i think you need move this line

React.render(<Button />, document.querySelector('#container'));

not only from render method but even from the class.

and you need to do some changes

so your code be like :

class Button extends React.Component {

  constructor(props) {
   super(props);
   this.state = {
   random: 0
    }
   }

   handleClick = () => {
      var min = 1;
      var max = 100;
      var rand =  min + (Math.random() * (max-min));
      this.setState ({this.state.random : rand})
   }

   render() {


    return (
      <div>
       <button value="Click me!" onClick={this.handleClick}> {this.state.random} </button>
       </div>
      );
  }


} 

React.render(<Button />, document.querySelector('#container'));

edited Jul 18, 2017 at 20:02

answered Jul 18, 2017 at 19:56

Ali Faris

18.7k12 gold badges51 silver badges75 bronze badges

Comments

Saad Mirza · Accepted Answer · 2018-08-21 20:10:37Z

3

There is an easy way to create Random Number using

random-string

var x = randomString({
length: 8,
numeric: true,
letters: false,
special: false,

});

Here is the documentation for more details random-string

answered Aug 21, 2018 at 20:10

Saad Mirza

1,19716 silver badges23 bronze badges

Comments

Avnish Jayaswal · Accepted Answer · 2022-08-24 13:04:15Z

1

import React, { useState } from "react";

const App = () => {
  const [num, setNum] = useState(0);

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

  const handleClick = () => {
    setNum(randomNumberInRange(1, 5));
  };

  return (
    <div>
      <h2>number is: {num}</h2>
      <button onClick={handleClick}>Generate random number</button>
    </div>
  );
};

export default App;

answered Aug 24, 2022 at 13:04

Avnish Jayaswal

4996 silver badges6 bronze badges

Comments

Ahmedakhtar11 · Accepted Answer · 2020-06-15 05:55:20Z

0

Random number in an Array in React: [Math.floor(Math.random() * 20)]

answered Jun 15, 2020 at 5:55

Ahmedakhtar11

1,58819 silver badges9 bronze badges

Collectives™ on Stack Overflow

Random number using React.js

7 Answers 7

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related