title: Image-rendering logic troubleshooting
body: <p>I have a react app where I populate a dropdown with folder names from an backend. When a folder is selected in the dropdown  the images in that folder gets rendered in the react app. All works as expected but when looking at the developer tools in chrome I see alot of errors when changing values in the dropdown .</p>
  
  <p>If I have this folders:</p>
  
  <pre><code>  folder1       folder2
      -A.jpg        -X.jpg
      -B.jpg        -Y.jpg
  </code></pre>
  
  <p>On load <strong>folder1</strong> is selected as default and images are rendered correct and no error-messages. The url that gets passed to the img elements is: </p>
  
  <pre><code>http://localhost:8080/images/folder1/A.jpg
  http://localhost:8080/images/folder1/B.jpg
  </code></pre>
  
  <p>But when I change to <strong>folder2</strong> new images shows correctly but when looking at the console it also tries to render the previous images but with the new foldername: </p>
  
  <pre><code>http://localhost:8080/images/folder2/X.jpg 
  http://localhost:8080/images/folder2/Y.jpg 
  http://localhost:8080/images/folder2/A.jpg *error
  http://localhost:8080/images/folder2/B.jpg *error 
  </code></pre>
  
  <p>To me it looks like the old img elements needs to be removed before adding the new elements, is this correct or what do I need to do to fix this?</p>
  
  <p><strong><em>image-gallery.component.jsx</em></strong></p>
  
  <pre><code>import React, {useState, useEffect} from 'react'
  import { Image } from './image.component'
  import './image-gallery.styles.scss'
  
  export const ImageGallery = ({theme}) =&gt; {
      const [imageNames, setImageNames] = useState()
      const fileListUrl = `http://localhost:8080/api/folders/${theme}`
      const baseUrl = `http://localhost:8080/images/${theme}/`
  
      useEffect(() =&gt; {
          const fetchFileNames = async () =&gt; {
              const data = await fetch(fileListUrl)
              const files = await data.json()
              setImageNames(files)
          }
          fetchFileNames()
      }, [fileListUrl,theme])
  
      return (
          &lt;div className="gallery-container"&gt;
             {imageNames &amp;&amp; imageNames.map(imageName =&gt; &lt;Image key={imageName} imageName={imageName} imageUrl={baseUrl+imageName}/&gt;)}
          &lt;/div&gt;
      )
  }
  
  </code></pre>
  
  <p><strong><em>image.component.jsx</em></strong></p>
  
  <pre><code>import React from 'react'
  import './image-gallery.styles.scss'
  
  export const Image = ({imageUrl, imageName}) =&gt; {
      return (
          &lt;div className="image-wrapper"&gt;
              &lt;img className="image" alt={imageName} src={imageUrl} height="200px" width="300px"/&gt;
          &lt;/div&gt;
      )
  }
  
  </code></pre>
  
  <p>combo-box</p>
  
  <pre><code>import React from 'react'
  
  export const ComboBox = ({title, themes, setTheme, onSelect}) =&gt; {
  
  
      return (
          &lt;div className="form-group"&gt;
          &lt;label className="label" htmlFor="select1"&gt;
            {title}
          &lt;/label&gt;
          &lt;div className="flex-line"&gt;
            &lt;div className="flex-group"&gt;
              &lt;select className="form-select" id="select1" onChange={(e)=&gt; setTheme(e.target.value)} &gt;
              {themes.map(theme =&gt; &lt;option key={theme}&gt;{theme}&lt;/option&gt;)}
              &lt;/select&gt;
            &lt;/div&gt;
            &lt;button className="button-icon" onClick={onSelect} &gt;
              &lt;i className="material-icons"&gt;check&lt;/i&gt;
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
  }
  
  </code></pre>
  
  <p>StartPage</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import { ComboBox } from "./admin-components/combo-box.component";
  import { ImageGallery } from "./image-component/image-gallery.component";
  import "./admin.styles.scss";
  import { FileUpload } from "./file-upload-component/file-upload.component";
  
  export const AdminPage = ({ themes }) =&gt; {
    const [selected, setSelected] = useState();
    const [showGallery, setShowGallery] = useState(true);
    const [input, setInput] = useState("");
    const [selectedFiles, setSelectedFiles] = useState([])
  
    useEffect(() =&gt; {
      themes &amp;&amp; setSelected(themes[0]);
    }, [themes]);
  
    const onSelect = () =&gt; {
      setShowGallery(true);
    };
  
    return (
      &lt;div className="admin-container"&gt;
        &lt;header&gt;&lt;/header&gt;
        &lt;main&gt;
          &lt;div className="container"&gt;
            &lt;div className="layout-group-sub"&gt;
              &lt;h3&gt;Välj Bilder&lt;/h3&gt;
              &lt;p className="introduction"&gt;
                info...
              &lt;/p&gt;
              {themes &amp;&amp; (
                &lt;ComboBox
                  themes={themes}
                  title={"Välj tema"}
                  setTheme={setSelected}
                  onSelect={onSelect}
                /&gt;
              )}
              &lt;div className="button-container"&gt;
                &lt;button
                  className="button-sub"
                  onClick={() =&gt; setShowGallery(false)}
                &gt;
                  Skapa Nytt
                &lt;/button&gt;
                {!showGallery &amp;&amp; (
                  &lt;&gt;
                    &lt;input
                      type="text"
                      className="new-theme-input"
                      value={input}
                      onChange={(e) =&gt; setInput(e.target.value)}
                    /&gt;
                    &lt;FileUpload files={selectedFiles} setFiles={setSelectedFiles} /&gt;
                  &lt;/&gt;
                )}
              &lt;/div&gt;
            &lt;/div&gt;
            {showGallery &amp;&amp; &lt;ImageGallery theme={selected} /&gt;}
          &lt;/div&gt;
                {selectedFiles.length &gt; 0 &amp;&amp; selectedFiles.map(file =&gt; &lt;p&gt;{file.id +" "+file.name}&lt;/p&gt;)}
        &lt;/main&gt;
        &lt;footer&gt; &lt;/footer&gt;
      &lt;/div&gt;
    );
  };
  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/lyLUd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lyLUd.png" alt="enter image description here"></a></p>