score:2
Accepted answer
i think your code don't need to change. i think you are missed in others.
try this code. it's the same as your code.
const {
button,
modal,
modalheader,
modalbody,
modalfooter
} = reactstrap;
class demo extends react.component {
constructor(props) {
super(props);
this.state = {
modal: false
};
}
toggle = () => {
this.setstate(prevstate => ({
modal: !prevstate.modal
}));
}
render() {
return (
<div>
<button color="primary" onclick={this.toggle}>click here</button>
{/*from here*/}
<modal isopen={this.state.modal} toggle={this.toggle}>
<modalheader toggle={this.toggle}>modal title</modalheader>
<modalbody>abc</modalbody>
<modalfooter>
<button color="primary" onclick={this.toggle}>
do something
</button>
<button color="secondary" onclick={this.toggle}>
cancel
</button>
</modalfooter>
</modal>
{/*to here*/}
</div>
);
}
}
reactdom.render(<demo />, document.getelementbyid("app"));
<link href="https://npmcdn.com/bootstrap@4.0.0-alpha.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://npmcdn.com/react@15/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/reactstrap@2/dist/reactstrap.min.js"></script>
<div id="app"></div>
Source: stackoverflow.com
Related Query
- How to close reactstrap modal on pressing escape button from keyboard in "React.js"?
- How to make reactstrap modal open or close from parent component
- React react-bootstrap - How do I close a modal window from an outside component
- How to open Bootstrap Modal from a button click in React
- How to close the modal in react native
- How to close a React Navigation modal with multiple screens in it
- Closing React Semantic UI modal with button and close icon
- How to use useRef hook to select next TextInput after pressing next keyboard button with redux-form
- How to close semantic ui modal in another react component?
- How to close a modal on browser back button using react-router-dom?
- ant design - Modal value reset on "cancel" and "X" close button - API RESPONSE BASE REACT JS
- React: How to close a modal from child opened from parent component
- How to get the selected value from a radio button group in React where there are multiple groups?
- How can we implement an Open with Postman button to open a postman collection link sent from a third party react application?
- ReactStrap modal close icon is not getting show in the modal and How to use the header with some another tag
- How do I add AppBar with Back to Top button from Material UI for React in my App?
- How to stop React Player from playing when close modal?
- Close Modal in UI React on Cancel button
- How to disable escape button in mdbreact modal for not closing modal
- How to delete objects from react state hook array with a button click
- How can I get value from react modal bootstrap?
- react Portal - how to close modal when clicking outside of modal and how to assign ref to modal inside parent component rendering modal?
- How to add Link from react router dom to the submit button with the default Submit validation
- How to close Modal the React way?
- How to close a Drawer from another React Component?
- How to close modal window without jquery in react
- How to run a function in React when the Escape button has been pressed?
- How to disable a button from react component inherited by a child react component?
- Semantic UI React : How to move Button from Left to Right
- How to change the ios keyboard return button to next/done in an react ionic app?
More Query from same tag
- ReactJS: Access context from base component
- JQuery on() does not fire on appended element
- mapStateToProps and variable is not defined React-Redux
- Close component on outside click- reactjs
- Promise test case failing only for Node 16
- Why is the output showing on next onMouseUp event in Reactjs
- Destructure object properties inside Array.prototype.map()
- Change image onClick in React Js
- ReactJS - cannot read this.props.value on state object
- Proper Way of Searching in React with debounce
- how to show react bootstrap modal inside the function
- React Algolia search returns no hits
- Adding data to state array in React Native
- How to display data from Flask in React App?
- How to customize Material-UI and styled-components props-based styles
- What is the alternative component of message.error() [antd] in material UI?
- using value in useState but when I use it in this.state the switch between tabs not happening
- Nothing was returned from render. This usually means the return statement is missing
- React: Cannot read property 'times' of undefined Although "times" is defined?
- Upgrading react-scripts to 4.x.x breaks my app
- JSX return a html segment
- React-Native Headless doubts
- Locomotive Scroll with React 17
- Adding condition in ComponentDidMount to display chart data
- React, Node axios not working but fetch is working
- Redux state is getting undefined
- Toggle dropdown menu in reactjs
- How to load a component separately from webpack bundles javascript?
- Attempting to map through an array of data and push items to different arrays
- How to avoid repeated executions of the same event?