score:0
so i was able to figure out the solution to this problem. i do not have a concrete explanation for this problem. but i solved it by using onenter
, a callback function fired before the modal transitions in.
i changed my stateless function to a class component. it doesn't affect anything, i just did it.
below is my code:
class buttonmodal extends component {
state = { loaded: false, show: false };
setshow = flag => {
this.setstate({ show: flag });
};
handleclose = () => {
this.setshow(false);
this.setstate({ loaded: false });
};
handleshow = () => {
this.setshow(true);
};
handleload = () => {
this.setstate({ loaded: true });
};
render() {
return (
<>
<button variant="outline-primary" onclick={this.handleshow}>
peak demand
</button>
<modal
show={this.state.show}
onhide={this.handleclose}
onenter={this.handleload}
size="lg"
centered
>
<modal.header closebutton>
<modal.title>
peak demand <peakdemandtooltip />
<p
style={{ fontsize: "50%", fontweight: "normal", color: "grey" }}
>
last peak demand occurred on march 12, 2020
</p>
</modal.title>
</modal.header>
<modal.body>
{this.state.loaded && <powerconsumptionchart />}
</modal.body>
<modal.footer>
<button variant="secondary" onclick={this.handleclose}>
close
</button>
</modal.footer>
</modal>
</>
);
}
}
Source: stackoverflow.com
Related Query
- Chart.js chart is not showing inside a React bootstrap modal
- react bootstrap modal not showing
- Pipedrive webforms not loading inside react bootstrap modal
- Why Map value are not displaying inside modal body in react bootstrap
- autoFocus on input when opening modal does not work - React Bootstrap
- React js: Nivo Pie chart not showing up
- Bootstrap Modal is not working in React JS
- React Bootstrap - Tooltip not showing with img in OverlayTrigger
- D3 line chart component not being updated inside useEffect in React
- How to use Bootstrap Modal inside map function in React Js to render indivisual elements?
- Slider inside of Modal is not working - React + Material UI
- Bootstrap styling not showing when deploying to heroku a RoR application with React
- React Bootstrap Modal show is not working as expected
- Link one Card to another Card inside a Modal React Bootstrap
- Issue showing modal with react hooks on bootstrap 5
- Bootstrap based Modal is not appearing in React / Next JS application
- React | Virtual DOM Modal is not showing
- Modal not showing in when rendered in React component
- Modal not showing proper video in react
- React Rodal not fitting the text inside the modal window
- how to show react bootstrap modal inside the function
- Bootstrap React tabs are not showing title/Tab name, what is the issue?
- Bootstrap Modal renders in React Component but is not visible
- Simple Bootstrap buttons not showing variant colors in React
- Modal not showing up in react with react-bootstrap
- Bootstrap modal not working in React typescript app but working on the fiddle
- React bootstrap modal not rendering updated data
- Modal in React not working. Showing errors
- Why is React Bootstrap Card not showing in the browser? The page is empty despite the component being used
- After the second click Modal is not showing in my react boostrap table
More Query from same tag
- How i use this style in react... " class[attribute] " [Edited v.2]
- A context consumer was rendered with multiple children, or a child that isn't a function
- How can I set the placeholder of Autocomplete in a new line?
- React - routing when there is a hash inside of a routing parameter
- How to trigger different functions when the mouse is scrolled up and scrolled down
- What exactly is match.url in React Router?
- State use as props in component, state change will not re-render the component
- I have 2 components and I want a 3rd component to show animation while waiting for the 2nd one to load images
- How do I go to home page when i refresh a page?
- Enzyme/Mocha: How to test a react component function by firing an onChange event from a child component
- Set Flexbox Min Height To Fill Remaining Screen in Scrolling Container
- How to use a bootstrap load spinner while fetching data from an external api?
- How to create a preview (Image and description) to the Url when shared link on Social media,Gmail and Skype using React JS?
- add item to async array with splice and useState
- Hooks in React Native: Only Call Hooks from React Functions
- React context and component testing
- How to mock useRef using jest.mock and react testing library
- Manipulation of Array in React
- React fetch multiple endpoints of API error TypeError: fetch(...).json is not a function
- How to convert float values in JSON to two decimal place using Javascript
- Fragments should contain more than one child - otherwise, thereās no need for a Fragment at all react/jsx-no-useless-fragment
- Reactjs pass props based on loaded component
- React in-memory Portal
- All TableRows are rerendered each time a row is selected with React and material-ui
- React: Can't pass an id to an endpoint in order to display an image
- React Dropzone does not work correctly with .pkl files
- React-router : render is not a function
- Yup .when validation with typescript
- Unload reactjs component
- Binding a props function