How to update back prop to child componet using react hook

Question

I have a parent componet like this, just to show the dialog

The Child Component ( Main to show dialog)

   export const MedicalRecord = memo(function MedicalRecord() {
  // const onPressViewAll = useCallback(() => {}, [])
  const [show, setShow] = useState(false) ///to show dialog

  function hanndleDialog() {
    setShow(!show) set to show dialog
  }

  // useEffect(() => {
  //   if (show == true) {
  //     setShow(!show)
  //   }
  // },[show])
  return (
    <SummaryViewContainer
      count={5}
      title={"dashboardScreen.medicalRecords.title"}
      onPress={() => {
        hanndleDialog()
      }}
    >
      <View>
        {show && (
          <ProgressDialog
            show={show} //pass t
            callback={() => {
              hanndleDialog()
            }}
          />
        )}
        <RecordItem />
        <RecordItem />
        <RecordItem />
      </View>
    </SummaryViewContainer>
  )
})

And parent componet to show this dialog

  export default function DialogTesting(show: boolean, { callback }) {
  const [showDialog, doShow] = useState(show) //show to present show in child

  return (
    <View>
      {/* <Button
        title="click"
        onPress={() => {
          setShow(true)
        }}
      >
        <Text>Show dialog</Text>
      </Button> */}
      <Dialog
        visible={showDialog}
        title="Record New Progress"
        style={DIALOG}
        onClose={() => {
          doShow(false)
          callback()
        }}
      >

But i cant figure out how to open dialog again when close the dialog, it only open for once, i try React Hook : Send data from child to parent component but not work !

How can i show dialog and when i click close button, the children return orignal state so i can click it again, thank you guy so much

Here is a short video of this problem https://recordit.co/0yOaiwCJvL

Answer 1

I am assuming that you want to find a way to show hide a component based on click. So this is the sandbox for the same.

In this solution, instead of using a derived state, the state is held in the parent's state and the child is mounted/unmounted based on that state.

The state can be updated by a method present in the parent and this method is passed to the child to be triggered on the "hide child" button. The same method is used to show the child component as well.

Below is the core code for the same,

import React from "react";

const Dialog = ({ hideMe }) => {
  return (
    <div>
      <div>I am dialog</div>
      <button onClick={hideMe}>Hide me</button>
    </div>
  );
};
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showDialog: false };
  }

  toggleDialog = () => {
    this.setState((prevState) => {
      return { showDialog: !prevState.showDialog };
    });
  };

  render() {
    return (
      <div>
        <div>I am parent.</div>
        <button onClick={this.toggleDialog}>Toggle Dialog</button>
        {this.state.showDialog ? <Dialog hideMe={this.toggleDialog} /> : null}
      </div>
    );
  }
}

export default App;