I am fairly new to react and am having an issue. I am using reactstrap to call a modal on click of a button. In reactstrap docs the modal is called on the click of a button in the modal component like so:
import React from 'react';
import { Button, Modal, ModalFooter, ModalHeader, ModalBody } from 'reactstrap';
class SubmitConfirmation extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false,
fade: true,
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal,
fade: !this.state.fade,
});
}
render() {
return (
<div>
<Button color="danger" onClick={this.toggle}>
TOGGLE
</Button>
<Modal isOpen={this.state.modal} toggle={this.toggle} fade={this.state.fade} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody></ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>
Do Something
</Button>{' '}
<Button color="secondary" onClick={this.toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default SubmitConfirmation;
I want to call the modal from the click of a button in a parent component How do I do this?
export default class SampleApp extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<div>
<Button
color="primary"
size="sm"
style={{ width: '100%' }}
onClick={this.toggle}
Submit
</Button>
</div>
)
}
}
How do I call the button from parent component:
It seems like you forgot to add this.props.toggle
<div>
<Button
color="primary"
size="sm"
style={{ width: '100%' }}
onClick={this.props.toggle}
Submit
</Button>
</div>
Since you are passing toggle function through props, the function belongs to this.props property of your component, just like any other property you pass to child component through props
You will need to move the state to the parent component to get this functionality,
Parent Component:
import React from "react";
import { Button } from "reactstrap";
import Child from "./Child";
export default class SampleApp extends React.Component {
constructor(props) {
super(props);
this.state = { modal: false, fade: true };
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal,
fade: !this.state.fade
});
}
render() {
return (
<>
<Button
color="primary"
size="sm"
style={{ width: "100%" }}
onClick={this.toggle}
>
Open
</Button>
<Child
modal={this.state.modal}
toggle={this.toggle}
fade={this.state.fade}
/>
</>
);
}
}
Child Component
import React from "react";
import { Button, Modal, ModalFooter, ModalHeader, ModalBody } from "reactstrap";
class SubmitConfirmation extends React.Component {
render() {
return (
<Modal
isOpen={this.props.modal}
toggle={this.props.toggle}
fade={this.props.fade}
className={this.props.className}
>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody></ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>
Do Something
</Button>{" "}
<Button color="secondary" onClick={this.toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
);
}
}
export default SubmitConfirmation;