title: React Hooks: Passing a parameter to a custom Hook to dynamically set API request query
body: <p>I have experience with React but I am very new to using Hooks. I'm working on a project that retrieves stats from the NHL API. I am building a site that allows users to view hockey stats by team. I have my project set up with <code>React-Router</code> so that each team's stats page is the team name i.e. <code>/rangers</code> is the New York Rangers page, <code>/capitals</code> is the Washington Capitals page, etc...</p>
  
  <p>The NHL API's endpoint for team stats looks like this <code>https://statsapi.web.nhl.com/api/v1/teams/3/roster</code> . The number after <code>teams</code> represents which team you are searching for. <code>3</code> in this query represents the New York Rangers endpoint. I have created an object to store team names and their associated number for the API request, like this:</p>
  
  <pre><code>const teams = {
      devils: {
          id: 1
      },
      islanders: {
          id: 2
      },
      rangers: {
          id: 3
      }
  }
  </code></pre>
  
  <p>I plan on using <a href="https://css-tricks.com/the-hooks-of-react-router/" rel="nofollow noreferrer">useLocation</a> to grab the team name from the URL, look up it's associated number in the above object, and then pass that number to an <code>axios</code> get request URL to retrieve that team's stats.</p>
  
  <p>For example, the user goes to the Islanders page at <code>/islanders</code> in my project, I then use <code>useLocation</code> to grab <code>/islanders</code> from the URL, then I look up the Islanders ID in the object and find <code>2</code>. I then want to pass the <code>2</code> to an <code>axios</code> GET request like this:</p>
  
  <pre><code>const [data, setData] = useState([]);
  
      useEffect(() =&gt; {
          axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${teamID}/roster`)
              .then(res =&gt; {
                  setData(res.data.roster);
                  console.log(res);
              })
              .catch(err =&gt; {
                  console.log('Error : ' + err);
              })
      }, []); 
  </code></pre>
  
  <p>How can I pass a <code>teamID</code> variable to the <code>axios</code> request? I have tried the following:</p>
  
  <pre><code> const [data, setData] = useState([]);
  const classes = useStyles();
  
  // Get URL from team page user is on
  const location = useLocation();
  //  '/islanders'
  const teamWithSlash = location.pathname;
  // Removes /    '/islanders' becomes 'islanders'
  const team = teamWithSlash.slice(1, teamWithSlash.length);
  
  useEffect((team) =&gt; {
      axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${teams.${team}.id}/roster`)
          .then(res =&gt; {
              setData(res.data.roster);
              console.log(res);
          })
          .catch(err =&gt; {
              console.log('Error : ' + err);
          })
  }, []); 
  </code></pre>
  
  <p>I've also tried building a custom Hook that would allow me to pass a <code>teamID</code> parameter to it but I couldn't figure out how to make that work. I can access the number I need to pass to the <code>axios</code> request but can't figure out how to dynamically pass it to <code>useEffect</code>.</p>