Modal not disappearing-CodePudding

im learning react, i have got a pop up on my screen and added logic to make it disappear, however it is not working and i dont know why. Can anyone help? thanks

import { useState } from 'react';
import Modal from './Modal';
import Backdrop from './Backdrop';

function Todo(props) {
const [modalIsOpen, setModalIsOpen] = useState();

   function deleteHandler(){
      {setModalIsOpen(true);}
   }

 return (
   <div className="card">
     <h2>{props.text}</h2>
     <div className="actions">
       <button className="btn" onClick={deleteHandler}>Delete</button>
     </div>
     {modalIsOpen ? <Modal /> : null}
     {modalIsOpen ? <Backdrop /> : null}
   </div>
 );
}

export default Todo;

This show make the modal false at the beggining however if i launch the webiste the modal is there straight away. thanks in advance

CodePudding user response：

I have modified the above snippet with some changes.

import { useState } from 'react';
import Modal from './Modal';
import Backdrop from './Backdrop';

function Todo(props) {
    const {text} = {...props}
    const [modalIsOpen, setModalIsOpen] = useState(false);

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

    return (
     <div className="card">
       <h2>{text}</h2>
       <div className="actions">
         <button className="btn" onClick={deleteHandler}>Delete</button>
       </div>
       {modalIsOpen && <Modal /> }
       {modalIsOpen && <Backdrop />}
     </div>
   );
}

export default Todo;

CodePudding user response：

You should intitialize modalIsOpen to false and then if you want to close the modal you should set to false not to true.

function deleteHandler(){
          setModalIsOpen(false);
       }

CodePudding user response：

change setModalIsOpen(true); to setModalIsOpen(false); on deleteHandler function