how make my hook valid ? Object are not valid as a react child - react-native

Question

i'm doing my hook with firestore. I did praticly exactly the same on an ohter page and he works. But this one i have the error : Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead.
On my console i can see an empty array like that
cc []
also my hook
async function GetFriendsRequest() {
const [TeamsArray, updateTeamArray] = React.useState([]);
firestore()
.collection("Teams")
// Filter results
.where("uid", "==", await AsyncStorage.getItem("userID"))
.get()
.then((querySnapshot) => {
if (querySnapshot.empty) {
console.log("no documents found");
} else {
querySnapshot.forEach(async (doc) => {
let Teams = doc._data;
TeamsArray.length = 0;
updateTeamArray((arr) => [...arr, Teams]);
console.log("cc", JSON.stringify(TeamsArray));
});
}
});
return (
<View>
{TeamsArray.map((element, key) => {
<View style={{ flex: 1, flexDirection: "row" }}>
<View>
<Text style={{ color: "#5DC1D3" }}>
{element.MembersList.nickName}
</Text>
<Text style={{ color: "#5DC1D3" }}>{element.Activity} </Text>
</View>
</View>;
})}
</View>
);
}
Something is wrong ?

Answer 1

Your .map() callback isn't returning anything. You need to replace the braces with parentheses in the body of the callback in order to return your JSX:
{TeamsArray.map((element, key) => (
<View style={{ flex: 1, flexDirection: "row" }}>
<View>
<Text style={{ color: "#5DC1D3" }}>
{element.MembersList.nickName}
</Text>
<Text style={{ color: "#5DC1D3" }}>{element.Activity} </Text>
</View>
</View>;
))}

Answer 2

There's a few mistakes in your component, you'll have to fix those first before debugging.
// This is a component, not a hook, so use it like <GetFriendsRequest />
async function GetFriendsRequest() {
const [TeamsArray, updateTeamArray] = React.useState([]);
// This code was in the render loop
// put it inside a function so it doesn't run on every single render
const init = async () => {
const uid = await AsyncStorage.getItem("userID");
firestore()
.collection("Teams")
// Filter results
.where("uid", "==", uid)
.get()
.then((querySnapshot) => {
if (querySnapshot.empty) {
console.log("no documents found");
} else {
const results = [];
querySnapshot.forEach(async (doc) => {
let Teams = doc.data();
// Don't mutate react state, it should be treated as immutable
// TeamsArray.length = 0;
// This is an async function, but it's being
// called as if it were syncronous
// updateTeamArray((arr) => [...arr, Teams]);
results.push(Teams);
});
// Schedule a single state update
updateTeamArray([...results, ...TeamsArray]);
}
});
}
// Use an expression like this to debug
useEffect(() => {
// Log state every time it updates
console.log(TeamsArray);
}, [TeamsArray]);
useEffect(() => {
init();
}, []);
return (
<View>
{TeamsArray.map((element, key) => {
// Something has to be returned from this map
return <View style={{ flex: 1, flexDirection: "row" }}>
<View>
<Text style={{ color: "#5DC1D3" }}>
{element.MembersList.nickName}
</Text>
<Text style={{ color: "#5DC1D3" }}>{element.Activity} </Text>
</View>
</View>;
})}
</View>
);
};