score:17

Accepted answer

You can take this as an reference with live example demo https://codesandbox.io/s/modal-6fvyx

function App() {
  const [status, setState] = React.useState(false);
  const [text, setText] = React.useState("");

  const handleClick = () => {
   setState(prevStatus => !prevStatus);
  };
  const handleChange = e => {
   setText(e.target.value);
  };


  return (
    <>
      <button onClick={handleClick}>Open photo entry dialog</button>
      <ChildComponent
        isOpen={status}
        text={text}
        handleChange={handleChange}
        handleClick={handleClick}
      />
    </>
  );
}

const ChildComponent = ({ isOpen, text, handleChange, handleClick }) => {
  return (
    <>
      {isOpen && (
        <Model
          status={isOpen}
          handleClick={handleClick}
          text={text}
          handleChange={handleChange}
        />
      )}
    </>
  );
};

score:0

Changed the child component to this. and its working

export default function ModalComp(props) {
    //const [modalOpen, setmodalOpen] = useState(true);
    if (props.show === false) {
        return null;
    }
    return (<Modal isOpen={props.show}>
        <ModalHeader>Deployment Status</ModalHeader>
        <ModalBody>{props.response}</ModalBody>
        <ModalFooter>
            <Button onClick={props.passedFunction}>Close</Button>
        </ModalFooter>
    </Modal>)

score:3

You need to remove the parentheses behind passedFunction, because otherwise you are executing the function first and passing the result to the child afterwards. Pass your function as it is via passedFunction={passedFunction}.

const ParentComponent = () => {

  const initialModalProps = { ... };
  const [modalProps, setModalProps] = useState(initialModalProps);

  const passedFunction = () => {
    setModalProps(initialModalProps);
  }

  return (
    <div>
      <Modal
        show={modalProps.show}
        response={modalProps.response}
        passedFunction={passedFunction} />
    </div>
  );

};

Related Query

More Query from same tag