title: How do you update the div with React?
body: <p>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.</p>
  
  <p>The code for the App.js:</p>
  
  <pre><code>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 (
          &lt;div&gt;
               &lt;Diceroll /&gt;
  
          &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>And my Diceroll.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Diceroll extends Component {
  
  render() {
      return (
          &lt;div&gt;
          &lt;button onClick={() =&gt; {this.dieroll()}}&gt;Roll the 120 Die&lt;/button&gt;
  
  
        &lt;/div&gt;
      )
    }
  
  dieroll() {
      var roll = Math.floor(Math.random() * 121);
  
      console.log(roll);
   }
  }
  
  export default Diceroll;
  </code></pre>
  
  <p>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.</p>