Displaying Parse.com data via SDK in React Native - parse-platform

Question

I've just started with React Native and I'm sure I'm missing something small. However, for the life of me I can't figure out how to display this.data.mission.XX anywhere. I can console log the data and see it in Xcode, but that's it.
var React = require('react-native');
var Parse = require('parse/react-native');
var ParseReact = require('parse-react/react-native');
var {
Component,
StyleSheet,
Image,
Text,
View,
StatusBarIOS,
} = React;
var CountdownClock = require('./CountdownClock');
var CountdownScreen = React.createClass({
mixins: [ParseReact.Mixin],
getInitialState: function() {
return{
mission: null,
};
},
componentDidMount: function() {
StatusBarIOS.setStyle('light-content');
},
observe: function() {
return {
mission: (new Parse.Query('mission')).equalTo('featuredMission', true)
};
},
render: function() {
console.log(this.data.mission);
return (
<Image source={{uri: '#'}} style={styles.backgroundImage}>
<View style={styles.mainContainer}>
<View style={styles.clock}>
<CountdownClock />
</View>
<View style={styles.featured}>
<Text style={styles.header}> Name: {this.data.mission.missionName} </Text>
<Text style={styles.header}> Estimated Start: {this.data.mission.windowStart}</Text>
<Text style={styles.header}> Site: {this.data.mission.missionSite}</Text>
<Text style={styles.header}> Vehicle: {this.data.mission.missionVehicle}</Text>
<Text style={styles.description}>{this.data.mission.missionDescription}</Text>
</View>
</View>
</Image>
);
}
});

Answer 1

Taking into account that this.data is logging out, you probably need to do something like this:
Set the data property in the state:
getInitialState(){
data: {}
}
Attach this.data to the state:
componentWillUpdate() {
this.setState({
data: this.data
})
}
Use this.state.data vs this.data
<View style={styles.featured}>
<Text style={styles.header}> Name: {this.state.data.mission.missionName} </Text>
<Text style={styles.header}> Estimated Start: {this.state.data.mission.windowStart}</Text>
<Text style={styles.header}> Site: {this.state.data.mission.missionSite}</Text>
<Text style={styles.header}> Vehicle: {this.state.data.mission.missionVehicle}</Text>
<Text style={styles.description}>{this.state.data.mission.missionDescription}</Text>
</View>