title: Getting undefined is not an object in React native when rendering
body: <p>I'm new to <code>React</code> and <code>React native</code> and am trying to <code>retrieve data from an API</code> and then render it but I seem to be running into problems. </p>
  
  <p>I can grab the data from the <code>API</code> alright, but when I try and <code>render</code> it I'm getting all sorts of errors. </p>
  
  <p>Essentially all I'm trying to do is render the photos that are returned from the API. Should be simple right? Would appreciate anyone who can point me in the right track.</p>
  
  <p>I'm getting errors like:</p>
  
  <blockquote>
    <p>undefined is not an object (evaluating 'this.props.photos') in RenderPhotos_render</p>
  </blockquote>
  
  <p>I may have jumped into <code>React Native</code> too early...So excuse my lack of knowledge!</p>
  
  <pre><code>var AwesomeProject = React.createClass({
      getInitialState: function() {
        return {
          isLoading: true,
          photos: this.props.photos
        };
      },
      componentWillMount: function(){
        fetch("http://localhost:3000/api/photos/", {
            method: "GET", 
            headers: {
              "x-access-token":"xxxxx",
              "x-key":"xxxx"
            },
          })
          .then((response) =&gt; response.json())
          .then((responseData) =&gt; {
              AlertIOS.alert(
                  "GET Response",
                  "Search Query -&gt; " + JSON.stringify(responseData)
              )
              this.setState({
                isLoading: false
              });
              this.setState({
                photos: JSON.stringify(responseData)
              });
          })
          .done();
      },
      render: function() {
          if(this.state.isLoading){
            return &lt;View&gt;&lt;Text&gt;Loading...&lt;/Text&gt;&lt;/View&gt;
         }
          return (
              &lt;RenderPhotos photos={this.props.photos}/&gt;
          );
      },
  
  });
  
  var RenderPhotos = React.createClass({
    getInitialState: function() {
        return {
          photos: this.props.photos
        };
    },
    render: function(){
      var photos = Photos;
      return (
        &lt;View&gt;
          &lt;Text&gt; {this.props.photos[0]} &lt;/Text&gt;
        &lt;/View&gt;
      )
    }
  });
  </code></pre>