React: How to pass function as props from Functional Parent component to child

Question

Parent Component:

const initialValue_modalProps = [
    { show: false, response: "" }
  ];
const [modalProps, setModalProps] = useState(initialValue_modalProps)
const passedFunction = () => {
    setModalProps(modalProps => initialValue_modalProps);
  }
..
..
 <div>
        <Modal show={modalProps.show}
          response={modalProps.response}
          passedFunction={passedFunction}></Modal>
 </div>

Child Component:

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

}

Here I want to passedFunction function from Parent to child so that the Child component can execute it to reset the state in parent

Answer 1

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}
        />
      )}
    </>
  );
};

Answer 2

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>
  );

};