title: React: why at a time only single onclick component works while others fail?
body: <blockquote>
  <p>Just started my React learning curve, please feel free to ask for clarifications if I am not able to explain. The question may look long but it's just the code for better understanding.</p>
  </blockquote>
  <p>This is my app.js which uses the router, the problem arises for <strong>profile</strong> path.</p>
  <pre><code>function App() {
    return (
      &lt;Router&gt;
        &lt;div className=&quot;App&quot;&gt;
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/&quot;&gt;
              &lt;h2&gt;Welcome to jatin&lt;/h2&gt;
              &lt;AnonymousUserApi /&gt;
              &lt;LoginButton /&gt;
              &lt;SignupButton /&gt;
            &lt;/Route&gt;
            &lt;Route exact path=&quot;/profile&quot;&gt;
              &lt;Profile /&gt;
              &lt;LoginUserApi /&gt;
              &lt;History /&gt;
              &lt;LogoutButton /&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  </code></pre>
  <p>Once user is authenticated using auth0, user is able to see    but the problem is if i click  component first then history component wont work and if i click <strong>history component</strong> first, loginuserAPi component wont work.</p>
  <p>In both the components, I am calling different backend APIs for both the component which sends back data( there is no problem with them).</p>
  <p><strong>Also:- These components can be clicked anytime by the user, it's not like they will be used once.</strong>
  Update :- after clicking the first component, when I try to click another component it always shows undefined.
  I am seeing cors/preflight issue too, for the second component even though cors is enabled in express</p>
  <p>my loginuserAPi component</p>
  <pre><code>import React, { useState } from 'react';
  import { useAuth0 } from '@auth0/auth0-react';
  var jwt = require('jsonwebtoken');
  
  const LoginUserApi = () =&gt; {
    const [orgURL, setorgURL] = useState('');
    const [responseData, setresponseData] = useState('');
  
    const { getAccessTokenSilently, user, isAuthenticated } = useAuth0();
  
    let token;
  
    const callSecureApi = async () =&gt; {
      try {
        token = await getAccessTokenSilently();
  
        let decodedToken = jwt.decode(token, { complete: true });
  
        console.log(token);
  
        const response = await fetch(
          'https://my api endpoint',
          {
            method: 'POST',
  
            headers: {
              Authorization: `Bearer ${token}`,
              'Content-Type': 'application/json',
            },
  
            // sending subclaim as userId to backend Axios request!
  
            body: JSON.stringify({
              longURL: orgURL,
              userId: decodedToken.payload.sub,
            }),
          }
        );
  
        const respData = await response.json();
        console.log(respData);
  
        setresponseData(respData.convertedURL);
        console.log('jatin', responseData);
      } catch (error) {
        alert(error.error);
      }
    };
  
    const submit = (e) =&gt; {
      e.preventDefault();
      console.log('clicked');
      if (!orgURL) {
        alert('URL cannot be empty');
      }
    };
  
    return (
      &lt;div className=&quot;container&quot;&gt;
        &lt;form onSubmit={submit}&gt;
          &lt;div className=&quot;mb-3&quot;&gt;
            &lt;label htmlFor=&quot;title&quot;&gt;Enter your URL&lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              value={orgURL}
              onChange={(e) =&gt; {
                setorgURL(e.target.value);
              }}
              className=&quot;form-control&quot;
              id=&quot;title&quot;
              aria-describedby=&quot;emailHelp&quot;
              placeholder=&quot;Enter Your URL&quot;
            /&gt;
          &lt;/div&gt;
  
          &lt;button
            type=&quot;submit&quot;
            onClick={callSecureApi}
            className=&quot;btn btm-sm btn-success&quot;
          &gt;
            Trimify
          &lt;/button&gt;
        &lt;/form&gt;
  
        {orgURL &amp;&amp; (
          &lt;div className=&quot;mt-5&quot;&gt;
            &lt;h6 className=&quot;muted&quot;&gt;Result&lt;/h6&gt;
            &lt;div className=&quot;container-fluid&quot;&gt;
              &lt;div className=&quot;row&quot;&gt;
                &lt;p&gt;{responseData}&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    );
  };
  
  export default LoginUserApi;
  </code></pre>
  <p>my history component.</p>
  <pre><code>import React, { useState } from 'react';
  import { useAuth0 } from '@auth0/auth0-react';
  var jwt = require('jsonwebtoken');
  
  const History = () =&gt; {
    const [historyOfUser, setHistory] = useState([]);
  
    const { getAccessTokenSilently, user, isAuthenticated } = useAuth0();
  
    let token;
  
    const callHistoryApi = async () =&gt; {
      try {
        token = await getAccessTokenSilently();
        let decodedToken = jwt.decode(token, { complete: true });
        console.log(token);
  
        const response = await fetch(
          'https://history-enpoint-api',
          {
            method: 'POST',
  
            headers: {
              Authorization: `Bearer ${token}`,
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ userId: decodedToken.payload.sub }),
          }
        );
  
        const respData = await response.json();
        console.log(respData);
  
        setHistory(respData.URLS);
        console.log('jatin', historyOfUser);
      } catch (error) {
        alert(error.error);
      }
    };
  
    return (
      &lt;&gt;
        &lt;button onClick={callHistoryApi} className=&quot;btn btm-sm btn-success&quot;&gt;
          History
        &lt;/button&gt;
  
        &lt;div&gt;
          {historyOfUser.map((history) =&gt; &lt;div key={history.originalURL}&gt;{history.converted}&lt;/div&gt; )}
        &lt;/div&gt;
      
      &lt;/&gt;
    );
  
  };
  
  export default History;
  </code></pre>
  <p><strong>In short how do multiple components fetching data from the backend can coexist?</strong></p>