0

Hi all,

In my React.js application, I have a component X, where I want to return a map() that iterates through my Firebase Realtime Database ref "lang".

But I keep on getting: "Objects are not valid as a React child (found: [object Promise])".

My code looks like this:

export default function X () {
    const mapped = firebase.database().ref('lang').once('value', function (snap) {
        snap.map(snap =>
                <button>
                {snap.key}
            </button>
        )
    })
    return (
        <article>
            {mapped}
        </article>
    )
}

How can I fix this?

THANKS!!

  • 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) You've got a Promise (as the error says) so you need to await/then the response before trying to render it in JSX. – jmargolisvt Nov 28 '20 at 17:21
  • 1
    It's not really a good idea to put async work immediately in your render function. Typically you use a useEffect hook or some other mechanism to get your component to re-render after the async work is complete. – Doug Stevenson Nov 28 '20 at 17:42

0 Answers0