The popup confirmation should be closed when any part of the screen outside the popup is clicked. But the popup remains on the page even after the outside is being clicked. And it keeps displaying " Line 2:8: 'Backdrop' is defined but never used no-unused-vars Line 3:8: 'Modal' is defined but never used no-unused-vars" in my terminal. Here is my code.
#Todo.js
import {useState} from 'react'
import Modal from './Modal'
import Backdrop from './Backdrop'
function Todo(props){
const [modalIsOpen, setModalIsOPen] = useState(false)
function deleteHandler(){
setModalIsOPen(true)
}
function closeModalHandler(){
setModalIsOPen(false)
}
return <div className='card'>
<h2> { props.text} </h2>
<div className='actions'>
<button onClick={deleteHandler}>Delete</button>
</div>
{modalIsOpen && <Modal/>}
{modalIsOpen && <Backdrop onCancel={closeModalHandler} />}
</div>
}
export default Todo;
#Backdrop.js
import propTypes from "prop-types"
function Backdrop(props){
return <div className='backdrop' onClick={propTypes.onCancel}/>
}
export default Backdrop
#Modal.js
function Modal(){
return <div className='modal'>
<p>Are you sure?</p>
<button className='btn-alt'>Cancel</button>
<button className='btn'>Confirm</button>
</div>
}
export default Modal
Firstly, I think your Modal has props problem
return <div className='backdrop' onClick={propTypes.onCancel}/>
It should be like this onClick={props.onCancel} because you're using props instead of propTypes.
Secondly, for the warning you get
Line 2:8: 'Backdrop' is defined but never used no-unused-vars Line 3:8: 'Modal' is defined but never used no-unused-vars
If you're using eslint, you need to check your .eslintrc should have some configs like below
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
If it's not there you can install it
npm install eslint@7 --save-dev
npm install eslint-plugin-react --save-dev