How to return JS object value after update

Question

I'm having trouble with objects. With this helper function, a user id will be inputted and returns a small component.

When I test in the console, I see the name being applied after. It renders to be undefined and does not update to reflect the user's name.

Goal: Make this function render the name

export function renderProInline(uid) {
     const pro = {};
     db.collection('COLLECTION_NAME').doc(uid).get()
          .then(function(doc) {
               if (doc.exists) {
                    pro.name = doc.data().name // THIS IS WHERE THE OBJECT IS UPDATED
               } else {
                    console.log("No such document!");
               }
          })
          .catch(function(error) {
               console.log("Error getting Pro:", error);
          })

     return (
          <div className={'pro'}>
               { `${pro.name}` }
          </div>
     );
}

Thank you in advance.

You need to make `renderProInline` an `async` function and `await` the promise resolution. That being said, you shouldn't use asynchronous functions to render JSX. Instead you should return or update state/props to let react rerender with new values. What you have is, I think, fine if you are just wanting to return some JSX for use later. — Drew Reese, Apr 18 '20 at 20:45

How to return JS object value after update

0 Answers0