React: Passing state back to the parent component

Question

I am fairly new to the react. I've browsed many threads with similar questions, followed instructions but can't crack this one: I have an parent component which opens dialog window but I cannot handle closing. I am using the sap UI5 library but I feel the issue is purely react related

In parent I have

const ExecutionsTable = () => {
  const [executionDialogIsOpen, setExecutionDialogIsOpen] = useState(false);

  const handleOpenExecutionDetailsClick = () => {
    setExecutionDialogIsOpen(true);
  };

  return (
    <>
      <Button
         onClick={() => {
           handleOpenExecutionDetailsClick(true);
         }}
        >
         Details
      </Button>
       {<ExecutionDialog setExecutionDialogIsOpen={setExecutionDialogIsOpen}/>}
    </>
  );
}

In child component

const ExecutionDialog = (props) => {
  return (
      <Dialog
         open={props.executionDialogIsOpen}
         onAfterClose={() => props.setExecutionDialogIsOpen(false)}
      />   
  );
}

I am getting error:

ExecutionDialog.js:35 Uncaught TypeError: props.setExecutionDialogIsOpen is not a function
    at Dialog.onAfterClose (ExecutionDialog.js:35:1)
    at Dialog._fireEvent (UI5Element.js:732:1)
    at Dialog.fireEvent (UI5Element.js:699:1)
    at Dialog.close (Popup.js:511:1)
    at HTMLDocument._keydownListener (OpenedPopupsRegistry.js:38:1)
onAfterClose @ ExecutionDialog.js:35
_fireEvent @ UI5Element.js:732
fireEvent @ UI5Element.js:699
close @ Popup.js:511
_keydownListener @ OpenedPopupsRegistry.js:38

Can you please guide me on what am I doing wrong? Many thanks.

your code looks good to me. I would try to check for typo, and `console.log(props.setExecutionDialogIsOpen)` in the ExecutionDialog component to see if there is any weird thing — Bao Huynh Lam, Oct 27 '22 at 16:36

score 1 · Answer 1 · answered Oct 28 '22 at 14:38

1

I've figured it out, this is how the ExecutionDialog component should look like:

<ExecutionDialog setExecutionDialogIsOpen = {setExecutionDialogIsOpen} executionDialogIsOpen = {executionDialogIsOpen}/>

answered Oct 28 '22 at 14:38

Vlado Jacko

21
2

React: Passing state back to the parent component

1 Answers1