score:2

Accepted answer

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>


Related Query

More Query from same tag