Unable to add Async keyword with App.tsx in ReactJS

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](https://stackoverflow.com/questions/57847626/using-async-await-inside-a-react-functional-component) — Jared Smith, Feb 27 '23 at 18:57
Or [this](https://stackoverflow.com/questions/50980378/fetching-data-in-react) or [this](https://reactjs.org/docs/faq-ajax.html) or... — Jared Smith, Feb 27 '23 at 18:58
Refer below answer, that seems similar to this question: https://stackoverflow.com/questions/57847626/using-async-await-inside-a-react-functional-component — Ankit Jain, Feb 28 '23 at 05: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, Feb 28 '23 at 07:50
@AnkitJain Are you calling a hook inside a conditional or a callback? Do you have an early return in your function component with a hook call after it? — Jared Smith, Feb 28 '23 at 13:40

score 0 · Answer 1 · answered Feb 27 '23 at 19:33

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 '23 at 19:33

Xurify

71
2
8

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 Feb 28 '23 at 07:51
Can you show the code? – Xurify Feb 28 '23 at 15:59

Unable to add Async keyword with App.tsx in ReactJS

1 Answers1