How to open modal bootrap from parent and close it by himself

Question

I want to open a modal from a parent component with props, and then close it when everything it's done and notify to the parent in case he wants to open again.

const ModalChild = (props) => {

  const [Activate, setActivate] = useState(props.Activate);

  const toggle = () => setActivate(!Activate);


  useEffect(() => {

     setActivate(props.Activate)

   }
    }, []);



  <Modal isOpen={Activate} toggle={false} >
       <text>hello {props.hey}<text>
   </Modal>
}

and the parents component, something like this:

const Accountlist= () => {

   const [Activate, setActivate] = useState(false);
    const toggle = (value) => {
        setActivate(true)
    }


render(
   <button onClick={() => toggle(value)} />
    <ModalEdit props={Activate}/>
)}

Please, anyone have anyidea?

Answer 1

If it were me, I will do it like this.

const Accountlist= () => {

   const [activate, setActivate] = useState(false);

   const toggleActivate = (value) => {
        setActivate(value);
    }

return [
   <button onClick={() => toggleActivate(!activate)} />,
    <ModalEdit isActivated={activate} toggleActivate={toggleActivate} />
]}

And at the child component.

const ModalChild = ({ isActivated, toggleActivate }) => {


  useEffect(() => {
     toggleActivate(!isActivated);
  }, []);



  <Modal isOpen={isActivated} toggle={() => toggleActivate(false)} >
       <text>hello {props.hey}<text>
   </Modal>
}

I'm not sure what you are trying to do but the rest with the logic I'll leave it to you.