Why won't my modal close when clicking the close button?

Question

I've hit a wall and have no clue what to do. I'm simply trying to close my bootstrap modal but it just won't close. It opens fine but again it just won't close. I've tried so many ways to rectify this that there won't be enough space on this post to list all my attempts.

What am I doing wrong and how can I fix this?

Here's App.js:

import React, { Component } from 'react';
import Product from './Product';
import { ProductConsumer } from "../context";
import TitleBody from "./TitleBody";
import AboutButton from "./AboutButton";
import AboutButtonModal from "./AboutButtonModal";

export default class App extends Component {
    constructor(props) {
        console.log("Props - ", props);
        super(props);
        this.state = {
            modalVisible: false
        };
        this.openModal = this.openModal.bind(this);
    }

    openModal() {
        console.log("Open modal called ", this.state.modalVisible);
        const modalVisible = !this.state.modalVisible;
        this.setState({
            modalVisible
        }, console.log(this.state.modalVisible));
    }

    render() {
        let styles = this.state.modalVisible
            ? { display: "block" }
            : { display: "none" };
        return (
            <React.Fragment>
                <div className="py-5">
                    <div className="container">
                        <TitleBody name="Welcome to" title="Cruskip"/>
                        <AboutButtonModal show={this.state.modalVisible} onClick={this.openModal} style={styles}/>
                        <AboutButton onClick={this.openModal}/>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }
}

Here's AboutButtonModal.js:

import React from 'react';
import './AboutButtonModal.scss';

const Modal = ({ handleClose, show, children}, props) => {
    const showHideClassname = show ? "modal display-block" : "modal display-none";

    return(
        <div className={showHideClassname} style={props.style}>
            <div className="modal-dialog">
                <div className="modal-content">
                    <div className="modal-header">
                        <button
                            type="button"
                            onClick={props.onClick}
                            className="close"
                        >
                            &times;
                        </button>
                        <h4 className="modal-title">Modal Header</h4>
                    </div>
                    <div className="modal-body">
                        <p>Some text in the modal.</p>
                    </div>
                    <div className="modal-footer">
                        <button
                            onClick={props.onClick}
                            type="button"
                            className="btn btn-default"
                        >
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Modal;

Here's AboutButton.js:

import React from 'react';
import './AboutButton.scss';

const AboutButton = (props) => {
    return(
        <div className="row">
            <button className="about-btn" type="button" onClick={props.onClick}>
                About Us
            </button>
        </div>
    );
};

export default AboutButton;

Try changing ({ handleClose, show, children }, props) to ({ handleClose, show, children, ...props }) in your modal component. — Dennis Martinez

Vicky Vicky · Accepted Answer · 2019-11-15T04:30:39

If you are using ({ handleClose, show, children }, props),It won't give you to access of props onClick function..

So to use props, just apply object destructing of props..Now,Your code will become like this...

const Modal = ({ handleClose, show, children,...props})

Why won't my modal close when clicking the close button?

1 Answers