Cannot display firestore info in react native view - react-native

Question

I am trying ti display basic profile data from firestore on a profile page, but the information will not show up in the view. My code is below: I create a constructor with the state ethnicity
var db = firebase.firestore();
export default class Dashboard extends Component {
constructor() {
super();
this.state = {
displayName: firebase.auth().currentUser.displayName,
uid: firebase.auth().currentUser.uid,
ethnicity: ''
}
}
And I then update the state with componentDidMount() as shown below and then try to display it in view
componentDidMount() {
db.collection("profiles").doc(this.state.uid).get()
.then(doc => {
this.state.ethnicity= doc.data().ethnicity.toString();
console.log(this.state.ethnicity)
})
.catch(function(error) {
console.log("Error getting document:", error);
})
}
render() {
return (
<View style={styles.container}>
<Text style = {styles.textStyle}>
Mixee!
</Text>
<Text style = {styles.textStyle}>
Hello, {this.state.displayName}
</Text>
<Text style = {styles.textStyle}>
Profile:
</Text>
<Text style = {styles.textStyle}>
Ethnicity: {this.state.ethnicity}
</Text>
<Button
color="#3740FE"
title="Logout"
onPress={() => this.signOut()}
/>
</View>
);
}
The console.log(this.state.ethnicity) correctly prints out the ethnicity so I do not know why it isn't showing up. Any help appreciated thanks!

Answer 1

It looks like you are modifying state directly, with this.state.ethnicity = doc.data().ethnicity.toString(); This might not cause a re-render, so your component does not update with the new state. Instead, try:
this.setState({
ethnicity: doc.data().ethnicity.toString()
});
Calling setState will let React Native know that the state has changed, and that it should call render again, as explained here.