Function returning Promise in ternary expression not working React

Question

I have a function called permCheck() which will resolve to true or false based on some logic. I need to take the value from this and utilize it in a ternary expression to change the content the user sees. However, it seems to always be returning the true part of the expression, even when permCheck() is false.

Here is the permCheck() function which does properly return true or false :

function permCheck(res) {
  let isMember;
  return axios.get(window.location.origin + "/username").then((res) => {
    axios
      .get(
        "https://api.endpoint.com/ismember/" +
          res.data
      )
      .then((res) => {
        return res.data; // This will be true or false
      });
    isMember = res.data;
    return isMember;
  });
}

Then in the return for my react app I am trying to change the content based on the permCheck function. This is where it seems to always just default to the first part of the ternary expression. As you can see I even have a console.log in the ternary expression which is properly returning true or false.

return (
<div className="ui">
  <AppLayout
    content={
      permCheck().then((a) => {
        console.log("IN TERNARY: " + a);
        Promise.resolve(a);
      })
        ? appContent
        : accessDenied
    } // Here we expect true or false from permCheck()
    navigation={<ServiceNavigation />}
    notifications={<FlashMessage />}
    breadcrumbs={<Breadcrumbs />}
    contentType="table"
    tools={Tools}
    headerSelector="#navbar"
    stickyNotifications={true}
  />
</div>

);

Answer 1

You can't check for a value, that you will only receive in the future, so you can't just unwrap your promise.

Instead, you should use a state variable to store the result, and rerender your component, once it's available. Until then, you can render some loading effect/spinner/text, to inform the user.

Assuming you're using a functional component, it'd look like this:

function component(){
  const [permission, setPermission] = useState(undefined)
  //Use `useEffect` to prevent recurring checking
  useEffect(() => {
    permCheck().then((a) => {
      //Update (rerender) the component with the permission info
      setPermission(a)
    })
  }, [])
  return (
  <div className="UI">
    <AppLayout
      content={
        //When this runs for the first time, `permission` will be `undefined` (meaning 'not available'), so handle this case as well:
        permission === undefined
          ? 'Checking permission, hang on...'
          : permission
            ? appContent
            : accessDenied
      }
      navigation={<ServiceNavigation />}
      notifications={<FlashMessage />}
      breadcrumbs={<Breadcrumbs />}
      contentType="table"
      tools={Tools}
      headerSelector="#navbar"
      stickyNotifications={true}
    />
  </div>
  )
}

Answer 2

I write an answer because my comment is illegible. I think you function permCheck is equivalent to

function permCheck(res) { 
  let isMember; 
  return axios.get(window.location.origin + "/username").then((res) => { 
    isMember = res.data; 
    return isMember; 
  }); 
} 

the part

axios.get(
        "https://api.endpoint.com/ismember/" +
          res.data
      )
      .then((res) => {
        return res.data; // This will be true or false
      });

has no effects in the return value.

Here an example. As you can see, the resource logged is the first one not the second

 function permCheck(res) { let isMember; return axios.get("https://jsonplaceholder.typicode.com/todos/1").then((res) => { axios.get("https://jsonplaceholder.typicode.com/todos/2").then((res) => { return res.data; // This will be true or false }); isMember = res.data; return isMember; }); } permCheck().then(data=>console.log(data))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>