CODEWITHSUNDEEP
reactjsreact-hooks
Rajan Tiwari
Rajan Tiwari

Reputation: 39

How to set parent state false when child state is true

I am using 2 useState in my code. When 2nd useSate status is true I want 1st useState status to be made false. Please Guide!!!

I am able to make parent state false using the class component, not via the functional component.

        const App = () => {
        const [visible, setVisible] = useState(false);
        const [hideAuto, setAuto]= useState(false);

        const parentDrawer = () => {
        setVisible(true);
        };

        const onClose = () => {
        setVisible(false);
        };

        const childDrawer=()=>{
        setAuto(true);
        }

        const Selection = () => {
        setAuto(false);
        };

return (
  <>
    <Button type="primary" onClick={()=>{parentDrawer()}}>
      Open drawer
    </Button>
    <Drawer
      title="Multi-level drawer"
      width={520}
      closable={false}
      onClose={onClose}
      visible={visible}
    >
      <Button type="primary" onClick={()=>{chilDrawer()}}>
        Two-level drawer
      </Button>
      <Drawer
        title="Two-level Drawer"
        width={320}
        closable={false}
        onClose={Selection}
        visible={hideAuto}
      >
        This is two-level drawer
      </Drawer>
    </Drawer>
  </>
);
}

 ReactDOM.render(<App />, document.getElementById('container'));

Upvotes: 0

Views: 194

Answers (2)

Guy Ben David
Guy Ben David

Reputation: 518

Try this:

const App = () => {
        const [isDrawerOneVisible, setDrawerOneVisibility] = useState(false);
        const [isDrawerTwoVisible, setDrawerTwoVisibility]= useState(false);

        const handleDrawerOneState = () => {
          setDrawerOneVisibility(!isDrawerOneVisible);
        };

        const handleDrawerTwoState = () => {
          setDrawerTwoVisibility(!isDrawerTwoVisible);
        };

return (
  <>
    <Button type="primary" onClick={handleDrawerOneState}>
      Open drawer
    </Button>
    <Drawer
      title="Multi-level drawer"
      width={520}
      closable={false}
      onClose={handleDrawerOneState}
      visible={isDrawerOneVisible}
    >
      <Button type="primary" onClick={handleDrawerTwoState}>
        Two-level drawer
      </Button>
      <Drawer
        title="Two-level Drawer"
        width={320}
        closable={false}
        onClose={handleDrawerTwoState}
        visible={isDrawerTwoVisible}
      >
        This is two-level drawer
      </Drawer>
    </Drawer>
  </>
);
}

 ReactDOM.render(<App />, document.getElementById('container'));

Upvotes: 1

Igor Lebedisnky
Igor Lebedisnky

Reputation: 66

maybe I miss something in your question, but just to verify , Have you tried this:

     const childDrawer=()=>{
     setAuto(true);
     setVisible(false);***
     }

Upvotes: 0

Related Questions