React-Native - Firebase data in TextInput - firebase

Question

I could retrieve data from Firebase and display it immediately after. But when I try to use it in render, it is blank. I am new to react-native and might be doing something incorrect. How can I use data from Firebase in render ?
Here is my code:
componentWillMount() {
firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
var DisplayEmail = snapshot.val().Email; alert(DisplayEmail);
});
}
render() {
return (
{alert(this.props.DisplayEmail)}
<TextInput style={styles.input}
autoFocus = {true}
autoCorrect = {false}
autoCapitalize = "none"
placeholder={this.DisplayEmail}
keyboardType="email-address"
underlineColorAndroid='transparent'
editable={false}
/>
)
}

Answer 1

Whenever you want to have something display on render, you should put it on state. By changing the state, you would cause the page to re-render and be updated with the new state. So when you do your firebase call, add it to state.
componentWillMount() {
firebase.database().ref('/users/' + userId).on('value', snapshot => {
this.setState({ DisplayEmail: snapshot.val().Email });
});
}
Calling set state just merges your state changes with your current state. Now you should be able to call state from render and have it work.
render() {
return (
{alert(this.props.DisplayEmail)}
<TextInput style={styles.input}
autoFocus={true}
autoCorrect={false}
autoCapitalize="none"
placeholder={this.state.DisplayEmail}
keyboardType="email-address"
underlineColorAndroid='transparent'
editable={false}
/>
)
}

Answer 2

it must be work :)
componentWillMount() {
firebase.database().ref('/users/' + userId)
.on('value', snapshot => {
this.state = { DisplayEmail: snapshot.val().Email
});
}
render() {
return (
{alert(this.props.DisplayEmail)}
<TextInput style={styles.input}
autoFocus = {true}
autoCorrect = {false}
autoCapitalize = "none"
placeholder={this.state.DisplayEmail}
keyboardType="email-address"
underlineColorAndroid='transparent'
editable={false}
/>
)
}