How do you update the div with React?

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.