Render array as component

Question

how can I render the data coming from my firestore database in react native?

below is my code that only pushes the data in an array but I don't know how to use it in a Card. I tried to use Flatlist but failed.

As of now whenever I tried to print the data in the console it looks like this:

Array [ "VD GOT JEALOUS", "Sample Content", ]

I want that array to be render in Card or Text component

state = {
    content: []
}
componentWillMount(){
    /* similar to mounted in vue */
    this.retrieveAnnouncement()
}
retrieveAnnouncement = () => {
    /* retrieve announcements */
    firebase.firestore().collection("announcement").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            this.state.content.push(doc.data().CONTENT);
        }).catch(err => console.log(err));
    });

};

render() {
    return (
        <View>
            <Button onPress={this.samplePrint} title="Print"></Button>
        </View>
    )
}

Answer 1

You can change your firebase code:

retrieveAnnouncement = () => {
const announcements = [];
/* retrieve announcements */
firebase
  .firestore()
  .collection('announcement')
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {
      announcements.push(doc.data().CONTENT);
    });
    this.setState({ content: announcements });// this will set announcements and triger render.
  })
  .catch(err => console.log(err));
}

After this in render method you can use the content array.

render (){
      console.log (this.state.content);
      const listItems = this.state.content.map((data) => {
        return (
          <View><Text>{data}</Text></View>
        )
      })
      return (
        <View>
            <Button onPress={this.samplePrint} title="Print"></Button>
            {listItems}
        </View>
    )
  }

Hope this will help to solve your problem.

Answer 2

state = {
    content: []
}
componentWillMount(){
    /* similar to mounted in vue */
    this.retrieveAnnouncement()
}
retrieveAnnouncement = () => {
  /* retrieve announcements */
  let sampleData = firebase.firestore().collection("announcement").get()
  .then((querySnapshot) => {
    if (querySnapshot.exists) {
      return { success: true, data: doc.data() }
    } else {
      return { success: false, message: "Not Found" }
    }
  }).catch(error => {
    return { success: false, message: error}
  });
  return sampleData
};

render() {
  return (
    <View>
      <Button onPress={this.samplePrint} title="Print"></Button>
    </View>
  )
}

Make sure you add return in each condition Hope this works

Answer 3

 componentWillMount(){
        /* similar to mounted in vue */
        this.retrieveAnnouncement();
    }
    retrieveAnnouncement = () => {
    const announcements = [];
        /* retrieve announcements */
        firebase.firestore().collection("announcement").get().then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
               announcements.push(doc.data().CONTENT);
            }).catch(err => console.log(err));
        });
    this.setState({content: announcements});
    };
render() {
    return (
        <View>
            <Button onPress={this.samplePrint} title="Print"></Button>
            <Text>{this.state.content}</Text>
        </View>
    )
}