How do you update the div with React?

Question

In my class we have started to learn how to use React, and I'm having a little trouble with one of the starter projects. I just need to press a button and have that number appear on the page, a very basic sim of a die roll. I can do this in the console but I can't figure out how to push the variable onto the page.

The code for the App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import './Diceroll';
import Diceroll from './Diceroll';

class App extends Component {
render() {
    return (
        <div>
             <Diceroll />

        </div>
    );
  }
}

export default App;

And my Diceroll.js:

import React, { Component } from 'react';

class Diceroll extends Component {

render() {
    return (
        <div>
        <button onClick={() => {this.dieroll()}}>Roll the 120 Die</button>


      </div>
    )
  }

dieroll() {
    var roll = Math.floor(Math.random() * 121);

    console.log(roll);
 }
}

export default Diceroll;

Yes, the die roll is supposed to be from 1 to 120. We looked up the die with the most sides on it an the first result was a die with 120 sides.

Answer 1

update Diceroll.js code below code.

import React, { Component } from "react";

class Diceroll extends Component {
  state = {
    roll: 0
  };
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.dieroll();
          }}
        >
          Roll the 120 Die
        </button>
        <br />
        <br />
        {this.state.roll}
      </div>
    );
  }

  dieroll() {
    var roll = Math.floor(Math.random() * 121);
    this.setState({ roll: roll });
    console.log(roll);
  }
}

export default Diceroll;

You can make use of state, using setState you can update and show updated roll number. click here to learn more about state

class Diceroll extends React.Component {

  state = {
    roll: 0
  }

  render() {
    return ( <
      div >
      <
      button onClick = {
        () => {
          this.dieroll()
        }
      } > Roll the 120 Die < /button> <
      br / > < br / > {
        this.state.roll
      } <
      /div>
    )
  }

  dieroll() {
    var roll = Math.floor(Math.random() * 121);
    this.setState({
      roll: roll
    });
    console.log(roll);
  }
}

class App extends React.Component {
  render() {
    return ( <
      div >
      <
      Diceroll / >

      <
      /div>
    );
  }
}

ReactDOM.render( <
  App / > ,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>