React: Close Modal from another Component

Viewed 68

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

0 Answers
Related