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

React: Using Modal in Functional Components

bhuma08 profile image bhuma08 Updated on ・2 min read

Right now, modal is my new obsession as it adds styling effortlessly!

In this example, a modal is created to show a list of my favourite animes!

First, a simple function component that returns a button is created as shown below:

import React from 'react';

function ModalInFunctionalComponent (){

    return(
        <>
           <button>Click to View My Favourite Animes</button>
        </>
    )
}

export default ModalInFunctionalComponent
Enter fullscreen mode Exit fullscreen mode

useState needs to be imported to set a boolean values for modal to open and close. Initially, modalIsOpen is set to false.

So, an onClick attribute is set to the button to open modal and once pressed, setModalIsOpenToTrue function is called to set modalIsOpen to true.

import React, {useState} from 'react';

function ModalInFunctionalComponent (){

    const [modalIsOpen, setModalIsOpen] = useState(false);

    const setModalIsOpenToTrue =()=>{
        setModalIsOpen(true)
    }

    return(
        <>
           <button onClick={setModalIsOpenToTrue}>Click to View My Favourite Animes</button>
        </>
    )
}

export default ModalInFunctionalComponent
Enter fullscreen mode Exit fullscreen mode

Next, to use modal, install modal: npm install react-modal and then import modal in your component: import Modal from react-modal.
The modal component is returned in the functional component which has isOpen attribute. Also, another button is added inside the modal component that calls on setModalIsOpenToFalse to close the modal.

Finally, I created another component that returns a list of my favourite animes and is imported and returned inside the modal component!

import React from 'react'

function AnimeList () {

        return (
            <>
            <ul>
                 <h1>One Piece</h1>
                 <h1>Fullmetal Alchemist: Brotherhood</h1>
                 <h1>Naruto</h1>
                 <h1>Bleach</h1>
                 <h1>Haikyu!!</h1>
                 <h1>Kuroko no Basketball</h1>
                 <h1>My hero academia</h1>
                 <h1>One punch man</h1>   
            </ul>     
            </>
        )

}

export default AnimeList
Enter fullscreen mode Exit fullscreen mode
import React, {useState} from 'react';
import Modal from 'react-modal';
import AnimeList from './Anime';


function ModalInFunctionalComponent (){

    const [modalIsOpen,setModalIsOpen] = useState(false);

    const setModalIsOpenToTrue =()=>{
        setModalIsOpen(true)
    }

    const setModalIsOpenToFalse =()=>{
        setModalIsOpen(false)
    }

    return(
        <>
            <button onClick={setModalIsOpenToTrue}>Click to Open Modal</button>

            <Modal isOpen={modalIsOpen}>
                <button onClick={setModalIsOpenToFalse}>x</button>
                <AnimeList/>
            </Modal>
        </>
    )
}
export default ModalInFunctionalComponent;
Enter fullscreen mode Exit fullscreen mode

That's it! You modal should be working!
final
final


Now, for some styling:

const customStyles = {
    content : {
      top                   : '50%',
      left                  : '50%',
      right                 : 'auto',
      bottom                : 'auto',
      marginRight           : '-50%',
      transform             : 'translate(-50%, -50%)',
      backgroundColor       : '#F0AA89'      
    }
};
Enter fullscreen mode Exit fullscreen mode

Modal component has a style attribute with the value of customStyles. You can also add onRequestClose attribute to set modalIsOpen to false. This will close the modal when the user click anywhere outside modal component, not just the 'x' button.

 <Modal isOpen={modalIsOpen} style={customStyles} onRequestClose={()=> setModalIsOpen(false)}>
       <button onClick={setModalIsOpenToFalse}>x</button>
       <AnimeList/>
 </Modal>
Enter fullscreen mode Exit fullscreen mode

final

Thank you for making it till the end :)

Discussion

pic
Editor guide