title: React.js: Image from API call not rendering in browser
body: <p>I'll explain this simply at first and then give more detailed examples of my code further to the end.</p>
  <p>So, I'm making an API call in my parent component, as follows:</p>
  <pre><code>    componentDidMount() {
          const url = 'http://www.hashigozake.co.nz/taplist.xml'
          const proxyURL = 'https://cors-anywhere.herokuapp.com/'
        
          fetch(proxyURL + url)
          .then(res =&gt; res.text())
          .then(beerXML =&gt; {
            let beerJs = new XMLParser().parseFromString(beerXML)
            this.setState({
              beers: beerJs
            })
          })
        }
  </code></pre>
  <p>...the data from which is being passed as props to <code>TileList.jsx </code> :</p>
  <pre><code>&lt;TileList beerList = {this.state.beers}/&gt;
  </code></pre>
  <p>Within <code>TileList.jsx</code>, I'm mapping through the returned API data:</p>
  <pre><code>import React from 'react'
  import Tile from './Tile'
  
  const TileList = (props) =&gt; {
      props.beerList.children &amp;&amp;
      props.beerList.children.length &amp;&amp; 
      console.log(props.beerList.children[0].children);
      return (
          &lt;&gt;
           &lt;h1 className = 'h1-pouring'&gt;Currently Pouring:&lt;/h1&gt; 
          &lt;div className = 'tile-container'&gt;
              {
                  props.beerList.children &amp;&amp;
                  props.beerList.children.length &amp;&amp;
                  props.beerList.children[0].children.map(product =&gt; {
                       return &lt;Tile product = {product}/&gt;
  
                  })
              } 
          &lt;/div&gt; 
          &lt;/&gt;
      )
  }
  
  export default TileList
  </code></pre>
  <p>....and then passing that data as props to <code>Tile.jsx</code></p>
  <pre><code>import React from 'react'
  
  class Tile extends React.Component  {
      // console.log(`this is the product being passed to Tile: ${props.product.children[8].value}`)
      constructor() {
          super()
          
      }
      render() {
          return (
              &lt;&gt;
               {this.props.product.children[11].value === 'Now' ?
                  &lt;div className = 'tile'&gt;
                  &lt;h1&gt;{this.props.product.children[0].value}&lt;/h1&gt;
                  &lt;h3&gt;{this.props.product.children[10].value}&lt;/h3&gt;
                  &lt;h3&gt;{this.props.product.children[1].value} : {this.props.product.children[2].value}&lt;/h3&gt; 
                  &lt;h3&gt;ABV {this.props.product.children[3].value}&lt;/h3&gt;
                  &lt;img src = {this.props.product.children[8].value}/&gt;
                  &lt;/div&gt;
              :
              null
              }
              &lt;/&gt;
              )
      }
  
  }
  
  export default Tile
  </code></pre>
  <p>So here's where the problem lies: <code>&lt;img src = {this.props.product.children[8].value}/&gt; </code> is not rendering an image in the browser (I'm getting the broken image icon).
  <code>console.log(this.props.children[8].value) </code> returns <code>islandlife.png </code>, which is the correct URL for the image. I also looked in the DOM, and the node for the image was <code> &lt;img src = &quot;islandlife.png&quot;&gt; ==$0</code></p>
  <p>If it's any help, here's the data from the API call that is passed as props :</p>
  <pre><code>children: Array(15)
  0: {name: &quot;Name&quot;, attributes: {…}, children: Array(0), value: &quot;Island Life IPA&quot;, getElementsByTagName: ƒ}
  1: {name: &quot;Volume&quot;, attributes: {…}, children: Array(0), value: &quot;300ml/473ml&quot;, getElementsByTagName: ƒ}
  2: {name: &quot;Price&quot;, attributes: {…}, children: Array(0), value: &quot;$10/$13&quot;, getElementsByTagName: ƒ}
  3: {name: &quot;ABV&quot;, attributes: {…}, children: Array(0), value: &quot;6.3%&quot;, getElementsByTagName: ƒ}
  4: {name: &quot;Handpump&quot;, attributes: {…}, children: Array(0), value: &quot;No&quot;, getElementsByTagName: ƒ}
  5: {name: &quot;Brewery&quot;, attributes: {…}, children: Array(0), value: &quot;Eddyline&quot;, getElementsByTagName: ƒ}
  6: {name: &quot;IBU&quot;, attributes: {…}, children: Array(0), value: &quot;&quot;, getElementsByTagName: ƒ}
  7: {name: &quot;ABV&quot;, attributes: {…}, children: Array(0), value: &quot;6.3%&quot;, getElementsByTagName: ƒ}
  8: {name: &quot;Image&quot;, attributes: {…}, children: Array(0), value: &quot;islandlife.png&quot;, getElementsByTagName: ƒ}
  9: {name: &quot;Country&quot;, attributes: {…}, children: Array(0), value: &quot;New Zealand&quot;, getElementsByTagName: ƒ}
  10: {name: &quot;Description&quot;, attributes: {…}, children: Array(0), value: &quot;Fruited IPA&quot;, getElementsByTagName: ƒ}
  11: {name: &quot;Pouring&quot;, attributes: {…}, children: Array(0), value: &quot;Now&quot;, getElementsByTagName: ƒ}
  12: {name: &quot;IBU&quot;, attributes: {…}, children: Array(0), value: &quot;&quot;, getElementsByTagName: ƒ}
  13: {name: &quot;TapBadge&quot;, attributes: {…}, children: Array(0), value: &quot;&quot;, getElementsByTagName: ƒ}
  14: {name: &quot;Comments&quot;, attributes: {…}, children: Array(0), value: &quot;&quot;, getElementsByTagName: ƒ}
  </code></pre>
  <p>Any ideas on how I can render the image? Thanks.</p>