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>
Source: stackoverflow.com
Related Query
- How do you update Formik initial values with the react context api values after an AJAX request?
- How do you update the div with React?
- How to setup sublime 3 with react native so that when you click on the error and it jump to your code?
- React - How to get height of the particular div if you know its class
- How to use the history to update the pagination bar with react router?
- How do I fix a React TypeScript error with the return value of useHotkeys hook not matching the type of the div element ref prop
- How to add event listener to the div element accessed with ref using react and typescript?
- React Router v6 : How to render multiple component inside and outside a div with the same path
- How to update the current state with current and previous state with react hooks
- How can i can change the value of a variable with if/else to return certain div in react
- Im using React Router and I want one of my route links with path="/" to be the home page on reload.. How can you do that?
- How to update react state with dropdown menu selection? I am using semantic UI for the dropdown
- How to update my react state with active tab menu name so it can pass on to the endpoint call?
- React useState: How can I update my useState with onChange for input and OnClick for the button?
- How do you can I update api result with the value of my input?
- How to make the state update in React with the last added task?
- How to update several states at the same time if their value depend on each other with react hooks
- How to update value of a key in object in an array with the new value in React useState in TypeScript
- How do you indicate that a request is loading, and then change the UI once a request is finished, with React Hooks?
- How do you avoid strings being rendered by React with the quotation marks around them?
- How to access the div element with a key in React JS? (react-dnd)
- How do you simulate a useEffect to update state while testing React with React Testing Library
- How to test a className with the Jest and React testing library
- How do you inspect a react element's props & state in the console?
- How do you make the ListHeaderComponent of a React Native FlatList sticky?
- How to fetch the new data in response to React Router change with Redux?
- How to mock history.push with the new React Router Hooks using Jest
- How to override the width of a TextField component with react MUI?
- How do you center a div element in react w/out external css file
- How to upgrade a React project built with create-react-app to the next create-react-app version?
More Query from same tag
- How to join two arrays in a map function?
- react card not displaying background
- How to show a message if the browser is not part of the browserlist?
- ts:How to access the state inside redux store
- React Router not rendering anything
- How can I get the width of a ChildNode in React?
- TypeError: _this2.setState is not a function
- How do we use two themes on the same DOM element when using a ThemeProvider?
- Highcharts custom data for map in React TypeScript?
- ReactJS - Window.ScrollTo() not working on secondary scroll bar
- Attempted import error: 'ReactReduxContext' is not exported from 'react-redux'
- How to update child's(from the created list) props from parent
- Re-render React Component when query string changes
- How to handle uncaughtException in react and render a simple "internal bug" message to the UI?
- this.setState does not update in Child when using a callback function to parent
- Why react does not show updated value even if state changes?
- How to toggle color mode change on a Switch Chakra UI component?
- Material UI v4 makeStyles exported from a single file doesn't retain the styles on refresh
- Using for loop inside return() function to display data in lists
- DatePicker doesn't work in a React custom Hook
- Updating State Context API, how to stop state from overwriting the current value in the reducer function?
- Call redux action within redux-saga inside websocket callback (stomp + sockjs)
- Selecting value from NavDropDown Item in Reactjs
- Google sheets API JavaScript: Access sheet with auth
- React + d3: Passing onHover function to all grouped elements in an SVG
- Yup don't trigger the error if value typing starts with 0
- How can I clone a MobX observable? (edit save changes)
- Overflow Hidden is not working - CSS - Styled Components
- How to pass a specific array element to a modal in react?
- useParams for apollo GraphQL query