How to return boolean value from custom function in react

Question

I have an app that takes in an object named user. The user object has userId information which is needed to get information from firestore database if the person is a paid member or not, membership is either true or false. If the person is a non-paid member than i want to display a button, and if he is a paid member, than i want the button to not be displayed. The problem i am having is how to return a boolean from the PaidMembership() function?

    const App = ({ user, database }) => {
    
       const PaidMembership = () => {
          var test = null;
          docRef.get().then(function(doc) {
            if (doc.exists) {
              test = doc.data().membership;
              //console.log(paidMembership);
            } else {
              console.log("Error: no such document exists")
              test = false;
            }
          })
    
          return test;
       }
    
       return (
           { PaidMembership() ? render : dont render}
       )
    }

Answer 1

Make test variable inside state and check

const [test, setTest] = useState(null);


    const App = ({ user, database }) => {
    
       const PaidMembership = () => {
       
          docRef.get().then(function(doc) {
            if (doc.exists) {
             setTest( doc.data().membership);
              //console.log(paidMembership);
            } else {
              console.log("Error: no such document exists")
              setTest(null);
            }
          })
    
          return test;
       }
    
       return (
           { test ? "" : <button>show button</button>}
       )
    }

Answer 2

This is because docRef.get returns promise and you are treating it as a normal function call. Try using this:

const App = async ({ user, database }) => {
  const PaidMembership = async () => {
    const doc = await docRef.get();
    return doc.exists;
  };

  return (await PaidMembership()) ? "render" : "dont render";
};