In React, how to render variable from a functional component?

Your code could quickly get confusing as you develop more functionality. As a rule of thumb, it's good to separate the business logic of your app from the UI.

Try putting your getTotalTokensMinted function in an /api folder or /utils. That function doesn't need to be a component; it simply needs to return a value...

const getTotalTokensMinted = async () => {
   const { ethereum } = window;
   let numTokens;
   try {

     if (ethereum) {
       const provider = new ethers.providers.Web3Provider(ethereum);
       const signer = provider.getSigner();
       const connectedContract = new ethers.Contract(contractAddress, contractABI, signer);

       numTokens = await connectedContract.getTokenNumber();
       return numTokens;
      } 
        return null

   } catch (error){
       console.log(error);
   }

And then in the component you actually want to display the minted count you can simply declare a variable count (or whatever) which will store the number of tokens.

const App = () => {
const count = await getTotalTokensMinted();
return (
   <div className="App">
     <div className="container">
         <p className = "sub-text">
         NFT MINTED = {count} / { TOTAL_MINT_COUNT }
         </p>
       </div>
     </div>
   </div>
 );

}

You may want to get the function returned value like this

return (
   <div className="App">
     <div className="container">
         <p className = "sub-text">
         NFT MINTED = {getTotalTokensMinted()} / { TOTAL_MINT_COUNT }
         </p>
       </div>
     </div>
   </div>
 );

If you get an array object error you need to change on how you return the value in the function like this :

return (
    <div> {numTokens?.map((each)=>{
           <div>{each}</div>
           })}
   </div> 
)

From react point of view you want some async operation and its output in DOM. According to provided code snippet you are calling getTotalTokensMinted in the DOM with incorrect syntax. As a solution you need to call async function in useEffect hook with no dependency to render as componentDidMount. You need local state to store result and then use that state in the DOM.

Steps

Follow these steps as a solution

Define local state

By using useState you can create local state. You can use global state depends on the requirement

const [NFTsMinted, setNFTsMinted] = useState(0);

Async function

Set state in async function as follow

const getTotalTokensMinted = async () => {
    const { ethereum } = window;
    
    if (ethereum) {
      const provider = new ethers.providers.Web3Provider(ethereum);
      const signer = provider.getSigner();
      const connectedContract = new ethers.Contract(contractAddress, contractABI, signer);

      const numTokens = await connectedContract.getTokenNumber();
      setNFTsMinted(numTokens)
    } 
  }

Call async function

Use useEffect hook to call function

  useEffect(() => {
    getTotalTokensMinted()
  }, [])

Display results in DOM

Use state variable to display counts

<div className="App">
  <div className="container">
    <p className = "sub-text">
      NFT MINTED = {NFTsMinted} / { TOTAL_MINT_COUNT }
    </p>
  </div>
</div>
    

You need to wrap your component in the proper syntax:

example: <Route exact path="/" element={Home}

Will give you this same error...Need to correct to this:

<Route exact path="/" element={}