模态在子组件中，按钮在父组件中如何关闭 reactjs 中的模态

Question

I have tried some of the methods, it could able to solve my solutions these are example: this is the Parent Component:

const[openup,setOpenup]=useState(false)

const setSchedule =() => setOpenup(true)

<Button onClick={setSchedule} >Openup</Button>
   <Child open={openup} />

this is the Chile Component:

export default function CreateSchedule(props) {

 const [show, setShow] = useState(props.open);

 const handleClose =() => setShow(false)
return(
  <div>
     <Modal className='dummy' show={show} onHide={handleClose}>
      Its not working  working !!! 
     </Modal>
  </div>
  ) 
}

Could any one get rid of this one, ...

Answer 1

Assuming Child is the CreateSchedule commponent, you can redesign your code structure so that the parent is controlling thee rendering of Modal by passing in props like open and also the function to close the modal

Your parent component will look like

const[openup,setOpenup]=useState(false)

const setSchedule =() => setOpenup(true)

const handleClose = () => setOpenup(false);
<Button onClick={setSchedule} >Openup</Button>

<Child open={openup} handleClose={handleClose}/>

Your Child component will be

export default function CreateSchedule(props) {
    return(
      <div>
         <Modal className='dummy' show={props.open} onHide={props.handleClose}>
          Its not working  working !!! 
         </Modal>
      </div>
      ) 

}