i want to Close a Modal in React from another Component. I open the modal from Component Event.js
//React imports
import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
const Event = ({ event, setCurrentId }) => {
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const EditEvent = () => {
return <CardActions className={classes.cardActions}>
<Button variant="outline-primary" style={{ color: 'white' }}
size="medium"onClick={handleOpen}><EditIcon fontSize="large" />
</Button>
<Modal
open={open}
>
<EditEventForm event={event} setUpdateEvent={setUpdateEvent} />
</Modal>
</CardActions>
} return null
}
export default Event;
and i want to Close the Modal in EditEventForm.js with a click on the Close Button call the handleClose from Event.js
const EditEventForm = () => {
return (
<Paper className={classes.paper} elevation={6}>
<form
autoComplete="off"
noValidate
className={`${classes.root}`}
>
<div>
<div className={classes.header} >Event bearbeiten
<IconButton className={classes.closebutton} onClick={} >
<CloseIcon />
</IconButton></div>
</div>
</form>
</Paper>
);
};
export default EditEventForm;
I dont know how to get access to the other Component. I tried many things but the problem was always that i didnt get the acces to the other Component