Bootstrap Modal goes blank after button click

Question

I am trying to call a Modal function. When I click to view it, it doesn't render and the page goes blank(white).

This is the code for BootstrapModal :

class BootstrapModal extends React.Component{

    constructor(){
        super();
        this.state = {
            showHide : false
        }
    }

    handleModalShowHide() {
        console.log("hitting");
        this.setState({ showHide: !this.state.showHide })
    }

    render(){
        return(
            <div>
                <Button variant="third" id="btn-third" onClick={() => this.handleModalShowHide()}>
                    Send Email
                </Button>
                <Modal show={this.state.showHide}>
                    <Modal.Header closeButton onClick={() => this.handleModalShowHide()}>
                    <Modal.Title>Email Chart To User</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <FormGroup>
                            <Modal.Label>Email address</Modal.Label>
                                 <Modal.Input
                                    type="email"
                                    placeholder="Email"
                                 />
                        </FormGroup>

                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={() => this.handleModalShowHide()}>
                            Cancel
                        </Button>
                        <Button variant="primary" onClick={() => this.handleModalShowHide()}>
                            Send
                        </Button>
                    </Modal.Footer>

                </Modal>

            </div>
        )
    }

}

export default BootstrapModal;

Any ideas on why this is happening? Any suggestions would be gladly appreciated.

Answer 1

I think your problem is that you have not binded the handleModalShowHide() function. You can aviod having to do thst using an arrow function:

handleModalShowHide = () => {
    Code here
}

Answer 2

I had to change

<FormGroup>
    <Modal.Label>Email address</Modal.Label>
        <Modal.Input
            type="email"
            placeholder="Email"
        />
</FormGroup>

To

<FormGroup>                           
    <label for="message-text" class="col-form-label">Email Adress:</label>
    <input type="text" class="form-control" id="recipient-name"></input>
</FormGroup>

After changing this, the Modal successfully rendered.