title: React - Dynamically rendering an image
body: <p>I basically want to dynamically upload an image by concatenating the url with a variable which contains the name of the image:</p>
  
  <pre><code>&lt;img src = {require(`./images/${imageStore[i]}`)}/&gt;
  // imageStore[i] prints the name of the image 
  </code></pre>
  
  <p>As the comment above says, imageStore[i] prints out the name of the image (mars.png) if I were to insert the variable in something like a p tag. 
  However I keep getting the error message:</p>
  
  <pre><code>Unhandled Rejection (Error): Cannot find module './undefined'.
  </code></pre>
  
  <p>Even weirder, when the app is initially rendered, I can clearly see the image present for a very short time before it errors with the error message, meaning it isn't undefined at all.</p>
  
  <p>I am pushing the items in the array as follows: </p>
  
  <pre><code>for(var i = 0; i &lt; image.length; i++){
        imageStore.push(image[i])
      }
  </code></pre>
  
  <p>I am not sure whether this is the problem however because I have done the exact same code with 2 other arrays and it has worked fine: </p>
  
  <p><a href="https://i.stack.imgur.com/4z2xx.png" rel="nofollow noreferrer">Screenshot of how the app renders so far</a></p>
  
  <p>The other two are fields (TEST 1 and TEST2) are made with the exact same process, just without the <code>require</code>:</p>
  
  <pre><code>const Product = (props) =&gt; {
      var imageStore = []
      var nameStore = []
      var priceStore = []
      var mixStore = []
      let image = props.imageProps
      let view = props.foodProps
      let prices = props.priceProps 
  
      for(var i = 0; i &lt; view.length;i++){
        nameStore.push(view[i])
      }
      for(var i = 0; i &lt; prices.length;i++){
        priceStore.push(prices[i])
      }
      for(var i = 0; i &lt; image.length; i++){
        imageStore.push(image[i])
      }
      var urlLink =  nameStore
      console.log(urlLink,'imageURL')
      console.log(image)
      for(var i = 0; i &lt; nameStore.length; i++){
        mixStore.push(
          &lt;div className='imageWrapper'&gt;
            &lt;div className='photo'&gt;
              &lt;img src = {require(`./images/${imageStore[i]}`)}/&gt;
            &lt;/div&gt;
            &lt;div className ='nameHolder'&gt;
              {nameStore[i]}
            &lt;/div&gt;
            &lt;div className ='priceHolder'&gt;
              {priceStore[i]}
            &lt;/div&gt;
          &lt;/div&gt;
        )
      }
  
      return(
        &lt;div&gt;
          &lt;div className='productWrapper'&gt;
            {mixStore}
            &lt;div className='priceWrapper'&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  </code></pre>
  
  <p>Any suggestions to this issue?</p>
  
  <p>Thanks</p>