How do I close my Modal using the react-modal component?

Question

hi friends i'm having a problem if someone can help me i'll be very grateful, i can't find out why my modal doesn't close using shouldCloseOnOverlayClick = {true} and even without using it it doesn't close either I'll put the code: components/_App/ModalLogin.js

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
import catchErrors from '../../utils/catchErrors';

const INITIAL_USER = {
    email: '',
    password: ''
}

const ModalLogin = ({isOpen, close }) => {
    const [user, setUser] = React.useState(INITIAL_USER);
    const [disabled, setDisabled] = React.useState(true);
    const [loading, setLoading] = React.useState(false);
    const [error, setError] = React.useState('');
    

    React.useEffect((modal) => {
        const isUser = Object.values(user).every(el => Boolean(el));
        isUser ? setDisabled(false) : setDisabled(true)
    }, [user]);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setUser(prevState => ({ ...prevState, [name]: value }));
    }

    const handleSubmit = async e => {
        e.preventDefault();
        try {
            setLoading(true);
            setError('');
            const url = `${baseUrl}/api/login`;
            const payload = { ...user };
            const response = await axios.post(url, payload);
            handleLogin(response.data);
        } catch (error) {
            catchErrors(error, setError);
        } finally {
            setLoading(false);
        }
    }

    const customStyles = {
        content: {
            top: '50%',
            left: '50%',
            right: 'auto',
            bottom: 'auto',
            marginRight: '-50%',
            transform: 'translate(-50%, -50%)'
        }
    };
 console.log(close)

    return (
        

            
                
                    
                        Fazer Login:
                        Informe seu nome e e-mail para fazer login e acessar seus pedidos.
                    
                    
                        
                        
                        
                    
                    Esqueci minha senha
                
            
        
    )
};

export default ModalLogin;

my file where I invoke the modal: components/_App/StaticHeader.js

import React from 'react';
import Link from "next/link";
import Router, { useRouter } from 'next/router';
import NProgress from 'nprogress';
import { handleLogout } from '../../utils/auth';
import ModalLogin from './ModalLogin';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

Router.onRouteChangeStart = () => NProgress.start();
Router.onRouteChangeComplete = () => NProgress.done();
Router.onRouteChangeError = () => NProgress.done();



const StaticHeader = ({ user }) => {


    const router = useRouter();
    const [menuActive, setMenuActive] = React.useState(false);
    const [search, setSearch] = React.useState({ search: '' });

    //console.log(user)
    const isRoot = user && user.role == 'root';
    const isAdmin = user && user.role == 'admin';
    const isRootOrAdmin = isRoot || isAdmin;
    const [modalIsOpen, setIsOpen] = React.useState(false);

    function openModal() {
        setIsOpen(true);
    }

    function closeModal() {
        setIsOpen(false);
    }

    const isActive = (route) => {
        return route == router.pathname;
    }

    const handleOnChange = (e) => {
        const { name, value } = e.target;
        setSearch(prevState => ({ ...prevState, [name]: value }))
    }

    const handleSearch = (e) => {
        Router.push({
            pathname: '/products',
            query: { term: search.search }
        })
    }

    const menuToggle = () => {
        setMenuActive(!menuActive)
    }


    return (
        
            
                
                    
                        
                            
                        
                    
                    
                        
                            
                            
                        
                    
                    
                        3
                        
                            
                                {modalIsOpen &&  }

                            Login
                            
                                Meus Pedidos
                                Meus Pedeidos
                                Meus endereços
                                Sair
                            
                        
                    
                

                
                    
                        Departamento
                    
                            Categoria
                            Categoria
                            Categoria
                            Categoria
                        
                    
                    
                        Departamento
                    
                            Categoria
                            Categoria
                            Categoria
                            Categoria
                        
                    
                    
                        Departamento
                    
                            Categoria
                            Categoria
                            Categoria
                            Categoria
                        
                    
                    
                        Departamento
                    
                            Categoria
                            Categoria
                            Categoria
                            Categoria
                        
                    

                
            
        
    );
}

export default StaticHeader;

What could I be changing to make my modal work as expected if someone can help me thanks

Nemanja Lazarevic · Accepted Answer

The issue is that you have encapsulated your modal inside the tag and in there you have an onClick which calls openModal. Once you click on "close" inside your modal the event propagates and triggers the click on tag.

To fix the issue just pull put the outside of your tag.

Login

{modalIsOpen &&  }

How do I close my Modal using the react-modal component?

Answers (2)

Related Questions