score:2
Accepted answer
you can't just import a component
and then call a method on it, because you aren't actually rendering it anywhere.
what you need to do is render the component, and then if you want to control the state of one component from another you need to "lift state up" and pass the state and any methods needed to the modal component as props. something like this:
modal component
import react, { component } from 'react'
import modal from 'react-bootstrap/modal'
import button from "components/button/button"
export class basemodal extends component {
render() {
if (!this.props.show) {
return null;
};
return (
<>
<modal show={this.state.show}>
<modal.header closebutton>
<modal.title>modal heading</modal.title>
</modal.header>
<modal.body>woohoo, you're reading this text in a modal!</modal.body>
<modal.footer>
<button variant="secondary" onclick={this.props.togglemodal}>
close
</button>
<button variant="primary" onclick={this.props.togglemodal}>
save changes
</button>
</modal.footer>
</modal>
</>
)
}
}
button docs
import react, { component } from 'react'
import button from "components/button/button"
import basemodal from "components/modals/basemodal"
export class buttondocs extends component {
constructor(props) {
super(props);
this.state = { show: false };
}
togglemodal() {
this.setstate({ show: !this.state.show })
}
render() {
<button value="open modal" onclick={this.togglemodal} />
<basemodal show={this.state.show} togglemodal={this.togglemodal} />
}
}
Source: stackoverflow.com
Related Query
- Modal Component - How to include and open/close from another component
- How to make reactstrap modal open or close from parent component
- I have my modal component in a different file and I'm trying to open it from another component
- How to open Modal from another component in hooks?
- How can I open a rect-bootstrap modal dialog from another Component
- How I can open a Modal from another component in React
- How to close one modal and open another with Chakra UI?
- How to open modal bootrap from parent and close it by himself
- React: How to close a modal from child opened from parent component
- ReactStrap modal close icon is not getting show in the modal and How to use the header with some another tag
- How do I close a dialog in another component from Material-UI in React?
- Open modal from another component click in react js
- react Portal - how to close modal when clicking outside of modal and how to assign ref to modal inside parent component rendering modal?
- How can I update a hook from one component and have it update another component as a result?
- How to take the input from a react component and pass the length of the input to another react component
- How to pass a prop back from child to parent in onclick handler and then to another component in React?
- react-modal: How to close one modal and open a new one at the same time?
- How to show and hide a Modal in child component from Parent component?
- How to fetch data from API and then pass it to another component in react after it is fully loaded?
- Carousel - How do i select carousel item and open modal from the selection
- How to open Drawer from another component
- how can i open a modal from other component in react js functional component react-modal
- How to store, submit and copy input from form to another component in ReactJS
- How can I pass the state from one component to another and how can I modify the state?
- How can I pass props from one component to another using Link and router in react
- React react-bootstrap - How do I close a modal window from an outside component
- How to display a react-bootstrap modal from another component
- How to disable backdrop and close previous open modal in react-modal
- React.js - How to implement a function in a child component to unmount another child from the same parent, and mount another component on it's place?
- How can I match data from an object and pass it as props to another component that displays dynamically?
More Query from same tag
- fireEvent.keyDown not working as expected on my Jest + React Testing Library test
- React - Redux; .map function duplicates Array sometimes
- ReactJS: How to load SVG dynamically from an const object?
- Why won't React production build run on the browser?
- React.js: Non-CSS animations
- React.js toggle faq type style
- How to space around top tab bar in react native?
- React Leaflet change maker when hover over outside element
- How to isolate state among different instances of functional component that uses useState hook?
- Want to make contentless div responsive to height of adjacent div
- Scrollable Table with Fixed Header using Reactstrap responsive table
- Mocking functions called inside then() with jest
- Why am I unable to target a mapped out <li> from the button mapped out with it with React?
- React useStyles Remove class name on click
- Select Dropdown, make default Value not a selectable option
- React useState update without set throught child component
- In KnovaJs, How to allow Rect to expand with Text or Allow Text to Have Border That Expand With Text Like If its Div in Html
- preloadedState when injecting asyncReducers
- How to render array passed to sub element in React JS?
- How can I set all text color in react components?
- Change the height of the row instead of the column width
- react-transition-group/react-router jumps to top of window on route change
- how to read state in the main component App, it's seems is not created
- How to convert imperial to metric units?
- React Material-UI pickers how to convert moment object and set state
- How to have default parameter for routes?
- How to Trigger Events in Node JS when a future date, time stored in Database is reached?
- Having issues getting a newline on my code
- ReferenceError: Cannot access 'steps' before initialization
- Why does Cypress not recognise the testid of a react-datepicker element?