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

akhtarvahid · Accepted Answer · 2023-04-06T07:37:49.050

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

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

  const handleClick = () => {
   setStatus(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}
        />
      )}
    </>
  );
};

@Vahid Akhtar The way you are setting the states is ugly. Why don't you use `setState` and `setText` if you're targeting the Hook API? — Kluddizz, Mar 29 '20 at 14:39
how would you approach this if handleClick was in a component class called 'WorldMap'? I've tried WorldMap.handleClick, ()=>WorldMap.handleClick but no joy. Thanks. D. — v3nt, Nov 30 '20 at 08:13

Kluddizz · Answer 2 · 2020-03-29T14:33:57.697

6

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

};

edited Mar 29 '20 at 14:33

answered Mar 29 '20 at 14:09

Kluddizz

703
3
8

Well, you are using the setter of your state `setModalProps` in a wrong way. You set it to be a function. Try `setModalProps(initialValue_modalProps)`. – Kluddizz Mar 29 '20 at 14:30
Though I have changed to your syntax. but I checked it twice. Both are working. – Soumitra Bhattacharyya Mar 29 '20 at 14:45

score 3 · Answer 3 · answered Mar 29 '20 at 14:37

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

How to pass function as props from functional parent component to child

Parent Component:

Child Component:

3 Answers3