Search code examples
reactjstypescriptreact-bootstrap

How to hide react bootstrap modal and also call the save function?


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>
        );
    }
}


Solution

  • 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>