React: Using Modal in Functional Components

#react #beginners #css #functional

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

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

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

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;

That's it! You modal should be working!

Now, for some styling:

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

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>