title: How to fix ' TypeError: undefined is not an object (evaluating 'subitem.media_details.sizes.medium.source_url') '
body: <p>I get <strong>TypeError: Undefined is not an object (evaluating 'subitem.media_details.sizes.medium.source_url')</strong> when i try to pull the Image source_URL from my wordpress API. </p>
  
  <p><a href="https://imgur.com/a/1KZdNVc" rel="nofollow noreferrer">https://imgur.com/a/1KZdNVc</a></p>
  
  <p><a href="https://imgur.com/a/WJoKKwh" rel="nofollow noreferrer">https://imgur.com/a/WJoKKwh</a></p>
  
  <p>The error messages in the attached images above points to the following lines of code</p>
  
  <p><code>{this.state.data &amp;&amp; this.state.data.length &gt; 0 &amp;&amp; (
            this.state.data.map(post =&gt; (</code></p>
  
  <p><code>{post.featured_media &gt; 0 &amp;&amp; post._embedded['wp:featuredmedia'].filter(element =&gt; element.id == post.featured_media).map((subitem, index) =&gt; (</code></p>
  
  <p><code>source={{ uri: subitem.media_details.sizes.medium.source_url }}</code></p>
  
  <p>I have gone through the JSON data from my wordpress API and there is definitely a URL.</p>
  
  <pre><code> class HomeScreen extends React.Component {
  
   constructor(){
   super();
    this.state = {
        data: null,
        loaded: true,
        error: null
     }
  }
  baseURL = 'https://wordpress-URL';
  
  getData = (ev)=&gt;{
  this.setState({loaded:false, error: null});
  let url = this.baseURL + '/posts?_embed';
  
  let req = new Request(url, {
  
      method: 'GET'
  });
  
  fetch(req)
  .then(response=&gt;response.json())
  .then(this.showData)
  .catch(this.badStuff)
  }
  showData = (data)=&gt;{
      this.setState({loaded:true, data});
      console.log(data);
  }
  badStuff = (err) =&gt; {
      this.setState({loaded: true, error: err.message});
  }
  componentDidMount(){
      this.getData();
  
  }
  
    render() {
  
  return (
    &lt;ScrollView&gt;
      { this.state.error &amp;&amp; ( &lt;Text style={styles.err}&gt;{this.state.error}&lt;/Text&gt; )}
      {this.state.data &amp;&amp; this.state.data.length &gt; 0 &amp;&amp; (
        this.state.data.map(post =&gt; (
          &lt;View key={post.id} &gt;
            &lt;TouchableOpacity onPress={() =&gt; this.props.navigation.navigate('Details', { article: post.content.rendered, title: post.title.rendered} )} &gt;
              &lt;View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', paddingTop: 25 }}
                borderBottomWidth={0.8}
                borderBottomColor={'gold'}  &gt;
                &lt;View&gt;
                  {post.featured_media &gt; 0 &amp;&amp; post._embedded['wp:featuredmedia'].filter(element =&gt; element.id == post.featured_media).map((subitem, index) =&gt; (
                    &lt;Image
                      source={{ uri: subitem.media_details.sizes.medium.source_url }}
                      style={{ width: width / 3, height: height / 5, borderRadius: 10 }}
                      key={index} /&gt;
  
                  ))
                  }
                  {/* &lt;Image source={require('../assets/Hotelcalifornia.jpg')}
                    style={{ width: 150, height: 150, borderRadius: 10 }} /&gt; */}
                &lt;/View&gt;
                &lt;View style={{ height: 170 }} &gt;
                  &lt;Text style={{ width: width / 2, height: height / 5 }}
                    fontSize={30} &gt;
                    {post.title.rendered}
                  &lt;/Text&gt;
                &lt;/View&gt;
              &lt;/View&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        )))}
  
    &lt;/ScrollView&gt;
  );
  }
  }
  </code></pre>
  
  <p>I expect Images from the URL to be displayed in the 
    tags inside the View, but instead i get the TypeError: undefined is not an object</p>