Pass function to custom hook

Viewed 4133

This is my custom component. Basically what is does is it shows modal on failure or success of the api calls.

export const useMessageModal = () => {
  const [IsModalVisible, setIsModalVisible] = useState(false);
  const [Message, setMessage] = useState(null);

  return [
    () =>
      IsModalVisible ? (
        <CModal
          isVisible={IsModalVisible}
          modalMsg={Message}
          onPressModal={() => setIsModalVisible(false)} //hideModal
        />
      ) : null,
    () => setIsModalVisible(true), //showModal
    msg => setMessage(msg),
  ];
};

In one of the components, I want to navigate to another page or call some context action on the modal button for that I want to pass some functions to this custom hook. Does anyone have any idea?


according to Shubham Verma answer, I've updated my code

import React, { useState, useEffect } from "react";
import "./styles.css";

const CModal = ({ onPressModal }) => {
  return (
    <div
      onClick={() => {
        console.log("TEst");
        onPressModal();
      }}
    >
      Click me to check function call(open console)
    </div>
  );
};

export const useMessageModal = (customFuntion) => {
  const [IsModalVisible, setIsModalVisible] = useState(false);
  const [Message, setMessage] = useState(null);

  return [
    () =>
      IsModalVisible ? (
        <CModal
          isVisible={IsModalVisible}
          modalMsg={Message}
          onPressModal={customFuntion} //hideModal
        />
      ) : null,
    () => setIsModalVisible(true), //showModal
    (msg) => setMessage(msg)
  ];
};

export default function App() {
  const [test2, setTest2] = useState(false);
  const [test, check] = useMessageModal(
    () => (test2 ? console.log("gjghjgj") : console.log("hello")),
    [test2]
  );
  useEffect(() => {
    check();
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={() => [console.log(test2), setTest2(!test2)]}>
        test
      </button>
      {test()}
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
1 Answers

You can simply pass function as a arguement ins useMessageModal. Here is the poc:

import React, { useState, useEffect } from "react";
import "./styles.css";

const CModal = ({ onPressModal }) => {
  return (
    <div
      onClick={() => {
        console.log("TEst");
        onPressModal();
      }}
    >
      Click me to check function call(open console)
    </div>
  );
};

export const useMessageModal = (customFuntion) => {
  const [IsModalVisible, setIsModalVisible] = useState(false);
  const [Message, setMessage] = useState(null);

  return [
    () =>
      IsModalVisible ? (
        <CModal
          isVisible={IsModalVisible}
          modalMsg={Message}
          onPressModal={customFuntion} //hideModal
        />
      ) : null,
    () => setIsModalVisible(true), //showModal
    (msg) => setMessage(msg)
  ];
};

export default function App() {
  const [test, check, anotherCheck] = useMessageModal(() =>
    console.log("hello")
  );
  useEffect(() => {
    check();
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {test()}
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Here is the demo: https://codesandbox.io/s/custom-hook-function-37kc8?file=/src/App.js

Related