Basic question, but I've been struggling.

const GetDisplayName = async () => {
    const docRef = doc(db, "userInfo", user.uid);
    const docSnap = await getDoc(docRef);

    if (docSnap.exists()) {
      console.log(docSnap.get("fullname"));
      const res = docSnap.get("fullname");
      return <Text>{res}</Text>;
    } else {
      return <Text>hello</Text>;
    }
  };

I can't get GetDisplayName to render no matter what I try. I even tried changing the res variable to a plain string. I keep getting objects that are not valid as react child error.

My return function looks like this. How come my Test component works fine, but not my GetDisplayName component, if both are returning JSX?

const Test = () => <Text>"yooo</Text>;
  //const docRef = doc(db, "userInfo", userID);
  

  return (
    <View>
      <Text>Welcome Home!</Text>
      <Test />
      <GetDisplayName />

CodePudding user response：

Since async/await is involved the return type of 'GetDisplayName' is a Promise element, not a JSX element. Hence you see objects are not valid as react child error. You have to do something like this to display the result -

const GetDisplayName = () => {
  const [name, setName] = useState('');

  useEffect(() => {
    const getName = async () => {
      const docRef = doc(db, "userInfo", user.uid);
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        console.log(docSnap.get("fullname"));
        const res = docSnap.get("fullname");
        setName(res);
      }
    };
    getName();
  }, []);

  return <Text>{name}</Text>;
};