Unable to add Async keyword with App.tsx in ReactJS [duplicate]

Question

We have an ReactJS App, and want to validate saved JWT Token at API end. For that adding await axiosClient.post("${URL}/AuthenticateUser/ValidateToken") in App.tsx, it's throwing an error.

index.tsx:

const msalInstance = new PublicClientApplication(msalConfig);
const container = document.getElementById('root');
const root = createRoot(container!);

root.render(
  <MsalProvider instance={msalInstance}>
    <App />
  </MsalProvider>,
);

module.hot?.accept();

App.tsx:

async function App() {
let isAuthenticated = false;
  const url = `${URL}/AuthenticateUser/ValidateToken`;

  if (localStorage.getItem('token')) {
    await axiosClient.post(url).then((result) => {
      /* Do Something */
    });
}

axiosClient.tsx:

export const axiosClient = axios.create({
  baseURL: URL,
  timeout: 300000,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    Authorization: `Bearer ${getToken()}`,
  },
});

Error:

TS2786: 'App' cannot be used as a JSX component.
Its return type 'Promise<Element>' is not a valid JSX element.

Does this answer your question? Using async/await inside a React functional component — Jared Smith
– Jared Smith, Commented Feb 27, 2023 at 18:57
Refer below answer, that seems similar to this question: stackoverflow.com/questions/57847626/… — Ankit Jain
– Ankit Jain, Commented Feb 28, 2023 at 5:27
@JaredSmith Now we are getting below error. Error: Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: — Ankit Jain
– Ankit Jain, Commented Feb 28, 2023 at 7:50

Xurify · Accepted Answer · 2023-02-27 19:33:08Z

0

You should not be adding the async keyword to the React component itself. Instead you should do something like this

function App() {
  const [isAuthenticated, setIsAuthenticated] = React.useState(false);
  React.useEffect(() => {
    const getToken = async () => {
      const url = `${URL}/AuthenticateUser/ValidateToken`;

      if (localStorage.getItem('token')) {
        await axiosClient.post(url).then(result => {
          /* Do Something */

          //Set this wherever you need it
          setIsAuthenticated(true);
        });
      }
    };
    getToken();
  }, []);
}

answered Feb 27, 2023 at 19:33

Xurify

7969 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ankit Jain Over a year ago

Now we are getting below error. Error: Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

Xurify Over a year ago

Can you show the code?

Collectives™ on Stack Overflow

Unable to add Async keyword with App.tsx in ReactJS [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related