How to manage state of custom dialog control from the parent control?

Question

How do I manage the open/closed states for a custom dialog control in react from the parent control? I'm currently using a version of the below but am using props which is definitely wrong as they are readonly

parentcontrol.tsx

<CustomDialog isOpen={true}></CustomDialog>

CustomDialog.tsx

export interface CustomProps
{
   isOpen: boolean;
}
export default function CustomDialog(props => CustomProps)
{
const [displayDialog,setDisplayDialog] = React.useState<boolean>(false);
const onCloseDialog = (() => { setDisplayDialog(false);});

return <> <Dialog open={props.open} title="example" handleclose={onCloseDialog}> </Dialog>
</>); 
}

Answer 1

You can pass a function as a prop to handle changes like this.

Parent:

  <CustomDialog onChange={(value)=>{isOpen = value}} </CustomDialog>
  

CustomDialog.tsx:

  export interface CustomProps

  export default function CustomDialog(props => CustomProps)
  {
  const [displayDialog,setDisplayDialog] = React.useState<boolean>(false);
  const onCloseDialog = (() => { props.onChange(false);});

  return <> <Dialog open={props.onChange(false)} title="example" 
  handleclose={onCloseDialog}> </Dialog>
  </>); 
  }