0

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> ) }
Improve this question
1

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0 
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

Improve this answer

Comments

0 
 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> ) }
Improve this answer

1 Comment

it didn't change any