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

Reputation: 605

use React Hook in multi files?

Senario : I have a dialog, and i use a react-hook to make it disappear ,like const[show,setShow]= useState(false) , this dialog file is a seperate file with main screen file, which contain button to show this dialog

Problem : I don't know how to show this dialog in main screen, for example, my dialog file called Mydialog.js have componet Mydialog, so i tried to put that hook show in props , Mydialog(show), but look like it not work that way, i still can't show the dialog

Question. How can i use react-hook for multi file, like i have hook in dialog file, present the dialog status ( show or not) then i can use it in mainScreen file to set show to true, then i can use that show and set to false when click button in dialog

Upvotes: 0

Views: 700

Answers (2)

Dan
Dan

Reputation: 8784

You can use Context to maintain state between multiple components.

const DialogContext = createContext();

const DialogProvider = ({ children }) => {
  const [isDialogVisible, setDialogVisible] = useState(false);

  const value = {
    isDialogVisible,
    setDialogVisible,
  }

  return <DialogContext.Provider value={value}>{children}</DialogContext.Provider>
}

const useDialog = () => {
  const context = useContext(DialogContext);

  return context;
}

Render the DialogProvider in one of the top-level components, for example in App.js.

// App.js

return (
  <DialogProvider>
    // ...
  </DialogProvider>
)

Then inside of your components you can use your hook and trigger the visibility of the dialog.

MyComponentA:

const { isDialogVisible, setDialogVisible } = useDialog();

const toggleDialogVisibility = () => {
  setDialogVisible(!isDialogVisible);
}

return (
  <Button title="Toggle" onPress={toggleDialogVisibility} />
)

MyComponentB:

const { isDialogVisible } = useDialog();

if(isDialogVisible) {
  return <Text>My Dialog</Text>
}

return null;

A very simple example of usage, here's a Snack for the above.

Upvotes: 1

Vishnu Narayanan
Vishnu Narayanan

Reputation: 33

If I understood it right you're trying to bring up a dialog when you interact with something on the main page and then close it by clicking on the X within the dialog. Would something like this work?

Main.js:

import "./styles.css";
import { useState } from "react";
import MyDialog from "./MyDialog";

export default function App() {
  const [showDialog, setShowDialog] = useState(false);

  const handleDialog = () => {
    setShowDialog(!showDialog);
  };

  return (
    <>
      <button onClick={handleDialog}>Show Dialog</button>
      Show Dialog: {showDialog?.toString()}
      {showDialog && <MyDialog handleDialog={handleDialog} />}
    </>
  );
}

MyDialog.js:

import "./styles.css";

export default function MyDialog({ handleDialog }) {
  return (
    <>
      <div className="popup">
        <div className="popup_open">
          <h1>Dialog Content</h1>
          <button onClick={handleDialog}>X</button>
        </div>
      </div>
    </>
  );
}

Sandbox link if you want to test: https://codesandbox.io/s/admiring-feather-sy1gf

Upvotes: 1

Related Questions