CODEWITHSUNDEEP
react-nativereact-hooks
Lê Quốc Khánh
Lê Quốc Khánh

Reputation: 605

How to change state of react hook inside other component

Senario

I have a dialog, it look something like this, it have hook for showing this dialog, called showDialog , and dialog have a button with Onpress method

export default function DialogTesting(show: boolean) {
  const [showDialog, doShow] = useState(show)

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

And a main sceen , it also have hook to show dialog, called show,

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

  function hanndleDialog() {
    setShow(!show)
  }
  return (
    <SummaryViewContainer
      count={5}
      title={"dashboardScreen.medicalRecords.title"}
      onPress={() => {
        hanndleDialog()
      }}
    >
      <View>
        {show && (
          <ProgressDialog
            show={show}
            callback={() => {
              hanndleDialog()
            }}
          />
        )}
        <RecordItem />
        <RecordItem />
        <RecordItem />
      </View>
    </SummaryViewContainer>
  )
})

Problem

When i click the button in main screen, change hook show to true to show dialog, and use this hook state in dialog to set show in dialog to true to show that dialog, and in dialog, when i click button to close dialog, it disappear, but problem is, the state of show in main screen remain true, so i have to press twice to show dialog again

Question

How can i change hook status in main screen, or how can i press close button in dialog, the show hook in main screen return false, i tried to change state of mainscreen in dialog but it won't work

Here is a short video of problem

https://streamable.com/9mm26t

Upvotes: 0

Views: 308

Answers (2)

Prerna Budhraja
Prerna Budhraja

Reputation: 206

You should maintain just one copy of your state in the parent component itself. Then pass "show" and "setShow" as props to the child component.

Parent Component:

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

  function hanndleDialog() {
    setShow(!show)
  }
  return (
    <SummaryViewContainer
      count={5}
      title={"dashboardScreen.medicalRecords.title"}
      onPress={() => {
        hanndleDialog()
      }}
    >
      <View>
        {show && (
          <ProgressDialog
            show={show}
            setShow = {setShow}
          />
        )}
        <RecordItem />
        <RecordItem />
        <RecordItem />
      </View>
    </SummaryViewContainer>
  )
})

Dialog Component:

export default function DialogTesting({show, setShow}) {    
  return (
    <View>
       {/* <Button
           title="click"
           onPress={() => {
           setShow(true)
           }}>
          <Text>Show dialog</Text>
         </Button> */}
       <Dialog
        visible={show}
        title="Record New Progress"
        style={DIALOG}
        onClose={() => {
          setShow(false)
        }}
      >
</View>
)
}

Upvotes: 1

oleg3790
oleg3790

Reputation: 34

It looks like you have 2 versions of local state at each component. You need to keep 1 version of "show" at the top most parent where you care to control this variable and then pass it down as a prop to your child components. Then on your child components you need to expose a callback that the parent will pass down and the child will call to trigger what occurs when the button is clicked in the child component.

Upvotes: 0

Related Questions