title: How to preload image in a React JS component?
body: <p>I'm currently rendering a child component when a <code>signInError</code> occurs. The <code>signInError</code> is stored in the parent component and if it's not null, it renders the <code>&lt;SignInError/&gt;</code> component, as per the code below:</p>
  
  <p><strong>ParentComponent.js</strong></p>
  
  <pre><code>  // Some code...
  
    render() {
      return(
        &lt;div&gt;
          &lt;SignInForm
            doSignIn={this.doSignIn}
            resetSignInError={this.resetSignInError}
            signInError={this.state.signInError}
          /&gt;
          {this.state.signInError &amp;&amp; &lt;SignInError/&gt;}
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>So far, so good, here's the child component <code>SignInError.js</code></p>
  
  <pre><code>import React from 'react';
  import RoundImage from '../../../UI/Common/RoundImage';
  import Newman from '../../../../assets/newman-min.png';
  
  class SignInError extends React.Component {
    constructor(props){
      super(props);
    }
  
      componentDidMount(){
      const img = new Image();
      img.src = Newman;
    }
  
    render(){
      return(
        &lt;div&gt;
        &lt;div&gt;
          &lt;RoundImage src={img.src}/&gt; // &lt;--- img is undefined here!!!
        &lt;/div&gt;
        &lt;div&gt;
          Hello... Newman!
        &lt;/div&gt;
      &lt;/div&gt;
      );
    }
  }
  
  export default SignInError;
  </code></pre>
  
  <p><strong>RoundImage.js</strong></p>
  
  <pre><code>import React from 'react';
  
  const RoundImage = (props) =&gt; {
    return (
      &lt;div&gt;
        &lt;img src={props.src}/&gt;
      &lt;/div&gt;
    );
  }
  
  export default RoundImage;
  </code></pre>
  
  <p><a href="https://stackoverflow.com/questions/42615556/how-to-preload-images-in-react-js">How to preload images in React.js?</a></p>
  
  <p>This question's answer (link above) here on Stack Over flow tells me to create the <code>img</code> object inside the <code>componentDidMount()</code> method to force the browser to load it. And so I did, as you can see from the code above. But now, when I try to pass it as a prop to my grand-child component inside my <code>render</code> method, I can't access the <code>img</code>, because it was defined inside of another method.</p>
  
  <p>What's the best way around this? I just need the image to be loaded and to be displayed together with the error message. Otherwise the error message will show before the image, if your browser hasn't cached it yet. Thanks for the help.</p>