CODEWITHSUNDEEP
reactjsreact-reduxreact-hooks
Umut Arpat
Umut Arpat

Reputation: 566

React: Hook gives an error in the body of function component

I want to put all my urls into one file. I need to call AuthToken method to return token.

When I call AuthToken while having useSelector hook inside, it gives me this error:

"Invalid hook call. Hooks can only be called inside of the body of a function component."

useSelector is in a function. I dont understand why I get this error. How can I fix it ?

Here is my code:

import { useSelector } from "react-redux";
import React from "react";

const AuthToken = () => {
  const token = useSelector((state: any) => state.facebookAuth.accessToken);
  console.log("Token" + token);
  return token; 
};

const version: string = "v10.0";
const baseURL: string = "https://graph.facebook.com/";
const getUserPagesURL: string = `${baseURL}${version}/me/accounts?access_token=${AuthToken()}`;

export { getUserPagesURL };

Upvotes: 0

Views: 138

Answers (2)

Nicholas Tower
Nicholas Tower

Reputation: 84912

This line of code is not inside the body of a component, so it cannot call hooks:

const getUserPagesURL: string = `${baseURL}${version}/me/accounts?access_token=${AuthToken()}`;

You could change it to something like this:

const version: string = "v10.0";
const baseURL: string = "https://graph.facebook.com/";
export const useUserPagesUrl = () => {
  const token = useSelector((state: any) => state.facebookAuth.accessToken);
  return `${baseURL}${version}/me/accounts?access_token=${token}`;
}

// To be used like:

const ExampleComponent = (props) => {
  const url = useUserPagesUrl();
  return (
    <div>
      {url}
    </div>
  );
}

See: Rules of Hooks

Upvotes: 0

leotuna
leotuna

Reputation: 416

React hooks have a rule: they can only be called inside a component.

The function you're calling it is not a component.

If you used useSelector inside a Form component, for example, it would work.

Upvotes: 1

Related Questions