Bootstrap Модал гаснет после нажатия кнопки

Question

Я пытаюсь вызвать модальную функцию. Когда я нажимаю, чтобы просмотреть его, он не отображается, и страница становится пустой (белый).

Это код для 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;

Есть идеи, почему это происходит? Любые предложения будут с благодарностью оценены.

Answer 1

Мне пришлось изменить

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

На

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

После изменения этого модал успешно рендерился.

Answer 2

Я думаю, что ваша проблема в том, что вы не связали функцию handleModalShowHide (). Вы можете избежать необходимости использовать функцию стрелки:

handleModalShowHide = () => {
    Code here
}