OnClick event, onClick={this.props.onHide} I'm being able to hide the Modal but I also need to call the save function. If I call the save function along with the props then the save function is called but the Modal doesn't close. Any help is appreciated. Component 1 -
import * as React from 'react';
import Modal from '../Modal/Modal';
export default class Example extends React.Component<IExampleProps, {}>{
constructor(public props: IAboutProps, public state: any) {
super(props);
this.state = {
helpModalShow: false,
};
}
public render(): React.ReactElement<IExampleProps> {
let helpModalClose = () => this.setState({ helpModalShow: false });
return (
<Modal
show={this.state.helpModalShow}
onHide={helpModalClose}
/>
);
}
}
Modal Component -
import * as React from 'react';
export default class Modal extends React.Component<IModalProps, {}>{
constructor(public props: IModalProps, public state: any) {
super(props);
this.state = {
};
}
public render(): React.ReactElement<IQuestionsModalProps> {
return (
<Modal
{...this.props}
//size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title>
Ask a Question
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Row>
<Col>
<button type="button" onClick=
{this.props.onHide}>Submit</button>
</Col>
</Row>
</Modal.Body>
</Modal>
);
}
}
then this should work call a function in onClick like this
save = () => {
//your save logic
this.props. onHide()
}
<Col>
<button type="button" onClick=
{this.save}>Submit</button>
</Col>