CODEWITHSUNDEEP
reactjs
Curious Coder
Curious Coder

Reputation: 33

Modal is not popping up on clicking the button

class CommentForm extends Component {
    constructor(props) {
        super(props);
        this.toggleModal = this.toggleModal.bind(this);
        this.state = {
            isModalOpen: false
        }
    }
    toggleModal = () => {
        this.setState({
            isModalOpen: !this.state.isModalOpen
        });
    };
    render() {
        
        return(
            <>
                <Button outline onClick={this.toggleModal}>
                    <span> <i className='fa fa-pencil fa-lg'></i> Submit Comment</span>
                </Button>
                <Modal isOpen={this.isModalOpen} toggle={this.toggleModal}>
                <ModalHeader toggle={this.toggleModal}>Comment</ModalHeader>
                    <ModalBody>
                        
                    </ModalBody>
                </Modal>
            </>
        );
    }
}

On clicking the button the modal is not popping up. Please have a look at it and let me know where I went wrong. I have used this component inside another component. Thanks :)

Upvotes: 0

Views: 39

Answers (1)

deepak
deepak

Reputation: 1375

it should like this:

<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>

rather than this:

<Modal isOpen={this.isModalOpen} toggle={this.toggleModal}>

Upvotes: 1

Related Questions