title: Use axios call as src of image
body: <p>I am sending an id as a prop to a child component which needs to do an API call with the id. The api returns some binary data from image files. I am using axios to deal with the request. I am also getting the result in the <code>.then()</code> but I am confused as to how to use this data and hook it up with the image tag in the <code>render()</code> function.</p>
  <pre><code>getImages = (id) =&gt; {
      axios.get(&quot;http://localhost:5000/getImage?id=&quot; + id)
        .then((res) =&gt; {
          console.log(res.data);
        })
    }
  
  render() {
      return (&lt;img src={this.getImages(this.props.id)}/&gt;);
  }
  </code></pre>
  <p><strong>Update 1:</strong></p>
  <p>I have tried setting the state from the <code>.then()</code> but I guess it causes to re-render and the application crashes from the front end.</p>