How to close a modal box nested in another custom component? My modal is in another component. I have a problem passing state to parent component. You can see the parent and child components below.
Parent component:
const ViewNote = ({route, navigation}) => { const [visible, setVisible] = useState(false); function visibility(cases) { setVisible(cases); console.log(cases); } return ( {/* 模态框 */} setVisible(true)}> ) } export default ViewNote
Subassembly:
const FancyAlert = ({visible}) => { const [showAlert, setShowAlert] = useState(false); return ( 您确定要删除此便签吗？ setVisible(false)}> 取消 ) } export default FancyAlert
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Move the state to the parent component and pass the onClose function.
const ViewNote = ({route, navigation}) => { const [visible, setVisible] = useState(false); function visibility(cases) { setVisible(cases); console.log(cases); } return ( {/* MODAL */} setVisible(false)} /> setVisible(true)}> ) } export default ViewNoteconst FancyAlert = ({visible, onClose}) => { return ( Are you sure you want to delete this note? Cancel ) } export default FancyAlertYou just need to pass the "visibility" function as a property of FancyAlert. Your code should look like this:
const ViewNote = ({route, navigation}) => { const [visible, setVisible] = useState(false); function visibility(cases) { setVisible(cases); console.log(cases); } return ( {/* MODAL */} visibility(true)}> ) } export default ViewNoteThen, the FancyAlert component should be:
const FancyAlert = ({ visible, visibility }) => { const [showAlert, setShowAlert] = useState(false); return ( 你确定要删除这个笔记吗？ visibility(false)}> 取消 ) } export default FancyAlertthat's it