loading...
Cover image for React: Using Modal in Class Components

React: Using Modal in Class Components

bhuma08 profile image bhuma08 ・2 min read

In my pervious blog, I explained how modal can be used in functional components. My obsession with modal continues so now, I'll go over one of the ways you can use modal in Class Components!

First start off with basic react class component:

import React, { Component } from 'react'

class ModalInClassComponents extends Component {
    render() {
        return (
            <div>

            </div>
        )
    }
}

export default ModalInClassComponents;

Enter fullscreen mode Exit fullscreen mode

Now, in your terminal, you want to install: npm install react-responsive-modal and import modal and style.css in your component:

import { Modal } from 'react-responsive-modal';
import 'react-responsive-modal/styles.css';
Enter fullscreen mode Exit fullscreen mode

Create a state for the modal to stay closed initially:

state ={
    openModal : false
}
Enter fullscreen mode Exit fullscreen mode

Create a button with onClick attribute. We will call function when the button is clicked which sets the openModal state to true.

<button onClick={this.onClickButton}>Click Me</button>
Enter fullscreen mode Exit fullscreen mode
onClickButton = e =>{
        e.preventDefault()
        this.setState({openModal : true})
}
Enter fullscreen mode Exit fullscreen mode

Now, we need to use the Modal component and add two attributes: open and onClose.
open is set to this.state.openModal, so the modal opens when the state is true.
onClose works the same way as onClick, however, in this case, we want to set the state back to false.

<Modal open={this.state.openModal} onClose={this.onCloseModal}>
//Here you can add anything you want to reveal when the button is clicked!
       <h1>You Did it!</h1> 
</Modal>
Enter fullscreen mode Exit fullscreen mode
onCloseModal = ()=>{
        this.setState({openModal : false})
}
Enter fullscreen mode Exit fullscreen mode

And that's it! You should be able to view your modal now:
final
final

I love modal because it adds a bit of oomph to your app and it's very simple and easy to use.

The full code looks like this:

import React, { Component } from 'react'
import { Modal } from 'react-responsive-modal';
import 'react-responsive-modal/styles.css';

class ModalInClassComponents extends Component {

    state={
        openModal : false
    }

    onClickButton = e =>{
        e.preventDefault()
        this.setState({openModal : true})
    }

    onCloseModal = ()=>{
        this.setState({openModal : false})
    }

    render() {
        return (
            <div>
                <button onClick={this.onClickButton}>Click Me</button>
                <Modal open={this.state.openModal} onClose={this.onCloseModal}>
                    <h1>You Did it!</h1>
                </Modal>   
            </div>
        )
    }  
}

export default ModalInClassComponents;
Enter fullscreen mode Exit fullscreen mode

Thank you for making it till the end!

Posted on by:

bhuma08 profile

bhuma08

@bhuma08

Just started coding and I'm acting like I know it all

Discussion

pic
Editor guide