score:2
Accepted answer
fixed here: https://codesandbox.io/s/rln4oz4vwq
basic idea: set loading to false by default, because you are not loading anything. on click of button, set loading to true as you truly are. then on completion of async stuff, set loading to false and submitsuccess to true to indicate you are done.
code:
import react from "react";
import reactdom from "react-dom";
import "./styles.css";
class app extends react.component {
constructor(props) {
super(props);
this.state = {
isloading: false,
submitsuccess: false
};
}
onclick = () => {
console.log("click");
this.setstate({
isloading: true
});
//lets assume you now do some async stuff and after 2 seconds you are done
settimeout(() => {
this.setstate({
isloading: false,
submitsuccess: true
});
}, 2000);
};
render() {
return (
<div classname="app">
<button onclick={this.onclick}>click</button>
{this.state.isloading ? (
<p>loading...</p>
) : this.state.submitsuccess ? (
<p>success!</p>
) : (
<p>are you sure?</p>
)}
</div>
);
}
}
const rootelement = document.getelementbyid("root");
reactdom.render(<app />, rootelement);
Source: stackoverflow.com
Related Query
- Simple loading before a success message
- Loading message before time consuming operation in React.js
- React - show loading message before fetched data is rendered
- react render message before loading new state
- How can I show a progress or loading bar while each data upload to server and a success message when through
- Set loading state before and after an action in a React class component
- React-native android WebView handle clicked Url before loading
- A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received, What does that mean?
- React video loading in memory before rendering to screen
- Display a simple loading indicator between routes in react router
- AsyncSelect does not change loading message nor no option message (react-select library)
- HTML5 Websocket wait for connection and readystate change before sending message
- Finish loading all components before displaying the page - React JS
- Show loading icon before first react app initialization
- How to show fullpage loader/spinner before React App finish loading
- Loading Skeleton before data totally fetched from api in react.js
- How to show success or error message based on the response of the api in React js
- useState loading not updating before async
- React - Loading data before render
- Formik onSubmit - remove form and success message
- Check prop values before loading component
- Displaying a success or error message in React JS upon form submit
- Show warning message before unmouting React component
- React: how to display success message if all requests were successful in a loop
- Condition before inserting an item and show message in reactjs
- how can I pass success or error message using react-toastify when using axios method
- Simple ternary operator throwing unexpected error message
- React loading screen before fetching API call
- ReactJS: show modal with loading message during superagent ajax request
- How to handle uncaughtException in react and render a simple "internal bug" message to the UI?
More Query from same tag
- How to use useEffect for a useState variable that has no dependency?
- What are themes when it comes to Material UI?
- REACT:Help conditionally rendering btn
- Resolve freezing in react while making calls
- React state - updating property on object in nested array
- Why items appends to the redux rather than replace?
- How to trigger useEffect in React only once AFTER some certain variable gets loaded
- Uncaught Error: Map container is already initialized
- React handleClick in parent
- next/image loads very big images
- Is there a way to access the link inside react-tooltip on hover?
- React scroll event keeps on firing
- react hook useffect how to trigger only when json data change?
- onClick decreases the number with each click rather than starting the timer
- Destruct react props using Typescript
- What is the correct way to pass props to component in React?
- Why won't my get route run my mongoose query?
- How I can Slide down other component using antd in reactJs
- TypeError: products.map is not a function. how do I fix this
- Type error on vsc but still can be complied?
- Assigning type to a React SFC function declaration in TypeScript
- Destructuring the data in React
- error: getstaticpaths is required for dynamic ssg pages and is missing for "yyy". nextjs
- Importing custom toolbar component doesn't fire methods in react-big-calendar
- Async props pass in React: How to pass a key to update redux store in react? [First from the higher component and then from redux store]
- String literal not compiling
- how to set an empty initial value for react-date-picker?
- Unnecessary re-renders on react-leaflet choropleth map
- React router 4 url issue
- React router goBack() not working properly