React: Using Modal in Functional Components
Tags: react, beginners, css, functional
Published: 2020-10-07 13:17:55

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:

```javascript
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`.


```javascript
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!

```javascript
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
```

```javascript
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! 
![final](https://i.imgur.com/JoMR1WC.png)
![final](https://imgur.com/vpZpRog.png)

***

Now, for some styling:

```javascript
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.

```javascript
 <Modal isOpen={modalIsOpen} style={customStyles} onRequestClose={()=> setModalIsOpen(false)}>
       <button onClick={setModalIsOpenToFalse}>x</button>
       <AnimeList/>
 </Modal>
```
![final](https://imgur.com/XAHxlXs.png)

Thank you for making it till the end :)