title: Way to call hooks from button events in react
body: <p>This is my first time to develop a react application. I intend to make an Api call when user clicked a button. Is it possible to directly call a hook from an event? If yes, how can I call it if the hook was from a different component?</p>
  
  <p>This is the button (different component)</p>
  
  <pre><code> const paginationButtons = (
      &lt;React.Fragment&gt;
        &lt;Button onClick={() =&gt; viewDetails()}&gt;View Details&lt;/Button&gt;
      &lt;/React.Fragment&gt;
    );
  
  function viewDetails() {
     //Is it Possible to call fetch data.js and pass the url from here?
    }
  </code></pre>
  
  <p>This is the hook for fetch data.js</p>
  
  <pre><code>import axios from 'axios';
  import PropTypes from 'prop-types';
  import { useState, useEffect} from 'react';
  
  const propTypes = {
    initialUrl: PropTypes.string.isRequired,
    initialParams: PropTypes.object
  }
  
  export const useFetchData = props =&gt; {
    PropTypes.checkPropTypes(propTypes, props, 'property', 'useFetchData');
  
    const { initialUrl, initialParams } = props;
  
    const [request, setRequest] = useState({
      url: initialUrl,
      params: initialParams
    });
    const [loading, setIsLoading] = useState(false);
    const [error, setError] = useState();
    const [data, setData] = useState([]);
  
    useEffect(() =&gt; {
      const {url, params} = request;
  
      const fetchData = async () =&gt; {
        setIsLoading(true);
        try {
          const result = await axios(url, {params: {...params}});
          setIsLoading(false);
          setData(result.data);
        } catch(err) {
          setIsLoading(false);
          setError(err);
        }
      }
  
      fetchData();
    }, [request]);
  
    const doFetch = (params) =&gt; {
      setRequest({url: request.url, params: params});
    };
    return {loading, error, data, doFetch};
  }
  
  </code></pre>
  
  <p>Thank you very much for your help.</p>