How can I read my function with firestore?

Question

I want to render my data with firestore.

I get my data and I call it on my componentdidmount:

constructor(props) {
    super(props);
    this.state = {
      Teams: [],
    };
  }
  getMesFriendsRequest = async () => {
    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((doc) => {
            let Teams1 = doc._data;

            this.setState({ Teams: this.state.Teams.push(Teams1) });

            console.log("cc132132", JSON.stringify(this.state.Teams));
          });
        }
      });
  };

  
  componentDidMount() {
    this.getMesFriendsRequest();
  }

Then, I did a .map on function:

RenderMyFriends = () => {
    return this.state.Teams.map((element) => {
      return (
        <View
          style={{
            flexDirection: "row",
            justifyContent: "space-between",
          }}
        >
          <View>
            <Text style={{ color: "#5DC1D3" }}>{element.Activity}</Text>
            <Text style={{ color: "#5DC1D3" }}>{element.City}</Text>
            <Text style={{ color: "#5DC1D3" }}>{element.members}</Text>
          </View>
        </View>
      );
    });
};

When I put my function renderMyFriends on my render, I get an error:

Undefined is not a function (near "..._this.state.Teams.map...")

This is my model on firestore:

Answer 1

• I have changed some of you renderMyFriend function code, it might help you to reduce error

  RenderMyFriends = () => {
  this.state.Teams.map((element) => {
    return (
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
        }}
      >
        <View>
          <Text style={{ color: "#5DC1D3" }}>{element.Activity}</Text>
          <Text style={{ color: "#5DC1D3" }}>{element.City}</Text>
          <Text style={{ color: "#5DC1D3" }}>{element.members}</Text>
        </View>
      </View>
    );
  }); };