Getting started with React Native, making http requests - react-native

Question

Ok, so i just started out with React Native and googled the subject I was able to make this:
index.ios.js:
var React = require('react-native');
var { AppRegistry } = React;
var MarvelsApp = require('./components/start');
AppRegistry.registerComponent('MarvelsApp', () => MarvelsApp);
start.js:
'use strict';
var React = require('react-native');
var {
Text,
View,
Image,
TextInput,
StatusBar,
ListView
} = React;
var b = 'https://api.themoviedb.org/3/movie/popular?api_key=XXXXXX';
console.log('api url',b);
var stylesStart = React.StyleSheet.create({
container: {
backgroundColor: 'pink',
flex: 1
},
test: {
color: 'black',
fontSize: 22
}
});
var Start = React.createClass({
getInitialState() {
return {
movie: [],
};
},
componentDidMount: function() {
    this.fetchData();
  },
fetchData: function(){
fetch(b)
.then((response) => response.json())
.then((data) => {
console.log('Logging api response', data.results);
this.setState({
movie: data
});
})
.done();
},
render: function() {
return (
<View style={stylesStart.container}>
<StatusBar barStyle="light-content"/>
<Text style={stylesStart.test}>{this.state.movie.title}</Text>
</View>
);
}
});
module.exports = Start;
Basically what I am trying to achieve is to make an http request using the api from themoviedb.org. And then to display the retrieved data in the view.
So far I am able to pull in the data via the http request but I am not having much luck showing it in the view. Now this could be because I missed a step or because I am doing it wrong.
Please point out to me where or what I am doing wrong

Answer 1

You are accessing the wrong key from this.state, try logging this.state and see the structure of it. You'll probably need to call this.state.movie[0].title to see the title.

Answer 2

you init the state variable movie as an array
(return {movie: [],};),
but you use it as an object (this.state.movie.title),
finally, you update the state (this.setState({movie: data});)
make sure the type you use are you need.
if you want to render as a list , the state variable movie should be an array, or you just want to render a item ,it could be an object