0

I am still new in react hooks and promise. I have one async function to call firebase remoteConfig with return value boolean, I put the function in object (menu.js component) , and use the object value in Sidebar.js component, but when I console log the "mainActivate" key Im getting the value Promise { <resolve>: true } instead of boolean value.

I am not sure how to resolved this issue, below is the sample code.

p/s: so sorry my english is not perfect.

firebase function for remote config

function.js

 export const FRemoteConfig = async (param) => {
    try{         
        const remoteConfig = firebase.remoteConfig()
        remoteConfig.settings = {
            minimumFetchIntervalMillis : 3600000
        }   
        remoteConfig.defaultConfig = ({
            'panelParam': '',
        });
       
        await remoteConfig.fetch()

        const response =  await remoteConfig.getBoolean(param)
        
        console.log(response)
        return response
     }
     catch(e){
        console.log(e)
        return(e)
     }
 }

this component for menu list. The async function is in the mainActivate key. menu.js

import { FRemoteConfig } from "RConfig"

const config = {
    dashboard: [
        {
            label: "Live",
            key: "db_live",
            Panel: livePanel,
            icon: <img loading="lazy" src={icon} alt="Live"/>,
            children: [],
            lightIcon: <img loading="lazy" src={LightIcon} alt="Live"/>,
            mainActivate: FRemoteConfig("communication")
        }
   ]
}

render: if the return value true display the tab, else no display

sidebar.js

        <div className="menu-list">
          {
            // menu
          config[page].map( ({ icon, label, children, lightIcon, mainActivate}, i) => {
            console.log(mainActivate) // ----> here does not return boolean.
            return mainActivate ?  (
              <Tab
                style={{fontSize: "16px", lineSpacing: "16px"}}
                key={i}
                i={i}
                icon={icon}
                lightIcon={lightIcon}
                label={<span className="font">{label}</span>}
                children={children}
                setFilter={setFilter}
                mainActivate={mainActivate}
              />
            ) : null
          })
          }
        </div>
Melissa
  • 43
  • 2
  • 7
  • 2
    You need to await `FRemoteConfig`, probably this `mainActivate: await FRemoteConfig("communication")` – cglacet Aug 30 '20 at 15:36
  • @cglacet I try to add it, but unfortunately Im receiving error "Parsing error: Can not use keyword 'await' outside an async function" – Melissa Aug 30 '20 at 21:27
  • 1
    Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Roamer-1888 Aug 31 '20 at 00:10

0 Answers0