title: List of user images feched from API in React are displayed and all 10 images flash to each user image then the 10th user image stays?
body: <p>I am developing a Top10UserList Component in React that fetches the top 10 users from the api, then fetches the image for each of those users and creates an image tag for each user sucessfully, and is supposed to display each user's image in their own tag.</p>
  <p>Unfortunately though, every one of the images shares the same state, so they all flash quickly through all 10 images and then stay on the final image.</p>
  <p>I need them to be seperate and but I am not sure how I can refactor my code to achieve this.</p>
  <p>React Component:</p>
  <pre><code>const TOP_USERS_URL = 'http://localhost:8080/users/top-players'
  const TOP_TEN_USERS_URL = 'http://localhost:8080/users/top-10-players'
  const TOP_TEN_USERS_IMAGES_URL = 'http://localhost:8080/image-files/download-using-username'
  const USER_IMG_URL = 'http://localhost:8080/image-files/'
  class TopUserList extends Component {
  
      constructor(props) {
          super(props);
          this.state = { users: [], top10Users: [], token: '', top10UsersImages: [], profUrl: '', profileImage: '' };
      }
  
      componentDidMount() {
          fetch(TOP_USERS_URL, {
              method: 'GET',
              headers: {
                  &quot;Accept&quot;: &quot;application/json&quot;,
                  &quot;Content-Type&quot;: &quot;application/json&quot;,
                  &quot;Authorization&quot;: localStorage.getItem(&quot;token&quot;)
              },
          })
              .then(response =&gt; response.json())
              .then(data =&gt; this.setState({ users: data }));
  
          fetch(TOP_TEN_USERS_URL, {
              method: 'GET',
              headers: {
                  &quot;Accept&quot;: &quot;application/json&quot;,
                  &quot;Content-Type&quot;: &quot;application/json&quot;,
                  &quot;Authorization&quot;: localStorage.getItem(&quot;token&quot;)
              },
          })
              .then(response =&gt; response.json())
              .then(data =&gt; {
                  this.setState({ top10Users: data });
  
                  console.log(data);
                  console.log(&quot;Data[0]&quot;)
                  console.log(data[0].username)
  
                  data.forEach(element =&gt; {
  
                          const imgUrl = USER_IMG_URL + element.username;
                          const id = element.id;
  
                          fetch(imgUrl, {
                              method: 'GET',
                              headers: {
                                  &quot;Authorization&quot;: localStorage.getItem(&quot;token&quot;)
                              }
                          })
                              .then(r =&gt; r.arrayBuffer())
                              .then(buffer =&gt; {
                                  const blob = new Blob([buffer]);
                                  this.state.img = URL.createObjectURL(blob);
                              });
  
                          const fetchImage = async (url) =&gt; {
                              try {
                                  const response = await fetch(url, {
                                      headers: {
                                          &quot;Authorization&quot;: localStorage.getItem(&quot;token&quot;)
                                      }
                                  });
                                  const imageBytes = await response.arrayBuffer();
                                  var blob = new Blob([imageBytes], { type: &quot;image/jpeg&quot; });
                                  var imageUrl = URL.createObjectURL(blob);
                                  return imageUrl;
                              } catch (error) {
                                  console.log(&quot;ERROR:&quot;, error);
                              }
                          };
  
                          const profileUrl = &quot;profile-image-&quot; + id;
  
                          this.state.profUrl = profileUrl;
  
                          (async () =&gt; {
                              const imageSrc = await fetchImage(imgUrl);
                              console.log(&quot;ImageSRC:&quot;);
                              console.log(imageSrc);
                              console.log(&quot;Profile Url:&quot;);
                              console.log(profileUrl);
                              this.setState({ profileImage: imageSrc })
                          })();
                          console.log(&quot;Profile Url:&quot;);
                          console.log(profileUrl);
  
                          document.getElementById(&quot;app&quot;).innerHTML = `
  &lt;image id={profileUrl}&gt;
  
  `;
                      }
                  );
              });
      }
  
  
  
      render() {
          const { users, top10Users, isLoading, profileUrl, profileImage} = this.state;
          console.log(&quot;Top 10 users data: &quot;)
          console.log(top10Users);
          console.log(&quot;Top 10 users using index: &quot;);
          console.log(top10Users[0]);
          console.log(&quot;ProfUrl: &quot;);
          console.log(profileUrl);
          console.log(&quot;profImg&quot;);
          console.log(profileImage);
  
          if (isLoading) {
              return &lt;p&gt;Loading...&lt;/p&gt;;
          }
  
          const topUserList = users.map(user =&gt; {
              return &lt;tr key={user.id}&gt;
                  &lt;td style={{ whiteSpace: 'nowrap' }} class=&quot;player-list-key-text&quot;&gt;{user.name}&lt;/td&gt;
                  &lt;td class=&quot;player-list-key-text&quot;&gt;{user.username}&lt;/td&gt;
                  &lt;td class=&quot;player-list-key-text&quot;&gt;{user.location}&lt;/td&gt;
              &lt;/tr&gt;
          });
  
          const topTenUserList = top10Users.map(user =&gt; {
              return &lt;div className=&quot;user-container&quot; key={user.id}&gt;
                  &lt;Card&gt;
                      &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
                      &lt;img src={profileImage} style={{ width: 200, height: 200 }} /&gt;
                      &lt;CardTitle&gt;{user.name}&lt;/CardTitle&gt;
                  &lt;/Card&gt;
              &lt;/div&gt;
          })
  
          return (
              &lt;div className=&quot;outer-div-container&quot;&gt;
                  &lt;div&gt;
                      &lt;Container fluid&gt;
                          &lt;h3 className=&quot;player-list-header&quot;&gt;Top Players&lt;/h3&gt;
  
                          &lt;Table className=&quot;mt-4&quot;&gt;
                              &lt;thead&gt;
                              &lt;tr id=&quot;player-list-row&quot;&gt;
                                  &lt;th className=&quot;player-list-data-text&quot;&gt;Name&lt;/th&gt;
                                  &lt;th className=&quot;player-list-data-text&quot;&gt;Username&lt;/th&gt;
                                  &lt;th className=&quot;player-list-data-text&quot;&gt;Location&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                              {topUserList}
                              &lt;/tbody&gt;
                          &lt;/Table&gt;
  
                          {topTenUserList}
                      &lt;/Container&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  export default TopUserList;
  </code></pre>
  <p>And the result:</p>
  <p><a href="https://i.stack.imgur.com/WUrSH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WUrSH.png" alt="enter image description here" /></a></p>
  <p>How can I do this in React? Do I need to create 10 different image state values?</p>
  <p>Thanks for any help!</p>
  <p>Updated code:</p>
  <pre><code>class TopUserList extends Component {
  
      constructor(props) {
          super(props);
          this.state = { users: [], top10Users: [], token: '', top10UsersImages: [], profUrl: '', profileImage: {} };
      }
  
      componentDidMount() {
          fetch(TOP_USERS_URL, {
              method: 'GET',
              headers: {
                  &quot;Accept&quot;: &quot;application/json&quot;,
                  &quot;Content-Type&quot;: &quot;application/json&quot;,
                  &quot;Authorization&quot;: localStorage.getItem(&quot;token&quot;)
              },
          })
              .then(response =&gt; response.json())
              .then(data =&gt; this.setState({ users: data }));
  
          fetch(TOP_TEN_USERS_URL, {
              method: 'GET',
              headers: {
                  &quot;Accept&quot;: &quot;application/json&quot;,
                  &quot;Content-Type&quot;: &quot;application/json&quot;,
                  &quot;Authorization&quot;: localStorage.getItem(&quot;token&quot;)
              },
          })
              .then(response =&gt; response.json())
              .then(data =&gt; {
                  this.setState({ top10Users: data });
  
                  console.log(data);
                  console.log(&quot;Data[0]&quot;)
                  console.log(data[0].username)
  
                  const profileImagesData = {}
  
                  data.forEach((element, userIndex) =&gt; {
  
                          const imgUrl = USER_IMG_URL + element.username;
                          const id = userIndex;
  
                          fetch(imgUrl, {
                              method: 'GET',
                              headers: {
                                  &quot;Authorization&quot;: localStorage.getItem(&quot;token&quot;)
                              }
                          })
                              .then(r =&gt; r.arrayBuffer())
                              .then(buffer =&gt; {
                                  const blob = new Blob([buffer]);
                                  this.state.img = URL.createObjectURL(blob);
                              });
  
                          const fetchImage = async (url) =&gt; {
                              try {
                                  const response = await fetch(url, {
                                      headers: {
                                          &quot;Authorization&quot;: localStorage.getItem(&quot;token&quot;)
                                      }
                                  });
                                  const imageBytes = await response.arrayBuffer();
                                  var blob = new Blob([imageBytes], { type: &quot;image/jpeg&quot; });
                                  var imageUrl = URL.createObjectURL(blob);
                                  profileImageData[element?.id] = imageSrc
                                  return imageUrl;
                              } catch (error) {
                                  console.log(&quot;ERROR:&quot;, error);
                              }
                          };
  
                          const profileUrl = &quot;profile-image-&quot; + id;
  
                          this.state.profUrl = profileUrl;
  
                          (async () =&gt; {
                              const imageSrc = await fetchImage(imgUrl);
                              console.log(&quot;ImageSRC:&quot;);
                              console.log(imageSrc);
                              console.log(&quot;Profile Url:&quot;);
                              console.log(profileUrl);
  
                              this.setState({profileImage:{...profileImageData}})
                              
                              })();
                          console.log(&quot;Profile Url:&quot;);
                          console.log(profileUrl);
  
                          document.getElementById(&quot;app&quot;).innerHTML = `
  &lt;image id={profileUrl}&gt;
  
  `;
                      }
                  );
              });
      }
  
  
  
      render() {
          const { users, top10Users, isLoading, profileUrl, profileImage} = this.state;
          console.log(&quot;Top 10 users data: &quot;)
          console.log(top10Users);
          console.log(&quot;Top 10 users using index: &quot;);
          console.log(top10Users[0]);
          console.log(&quot;ProfUrl: &quot;);
          console.log(profileUrl);
          console.log(&quot;profImg&quot;);
          console.log(profileImage);
  
          if (isLoading) {
              return &lt;p&gt;Loading...&lt;/p&gt;;
          }
  
          const topUserList = users.map(user =&gt; {
              return &lt;tr key={user.id}&gt;
                  &lt;td style={{ whiteSpace: 'nowrap' }} class=&quot;player-list-key-text&quot;&gt;{user.name}&lt;/td&gt;
                  &lt;td class=&quot;player-list-key-text&quot;&gt;{user.username}&lt;/td&gt;
                  &lt;td class=&quot;player-list-key-text&quot;&gt;{user.location}&lt;/td&gt;
              &lt;/tr&gt;
          });
  
          const topTenUserList = top10Users.map(user =&gt; {
              return &lt;div className=&quot;user-container&quot; key={user.id}&gt;
                  &lt;Card&gt;
                      &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
                      &lt;img src={this.state.profileImage[user.id]} style={{ width: 200, height: 200 }} /&gt;
                      &lt;CardTitle&gt;{user.name}&lt;/CardTitle&gt;
                  &lt;/Card&gt;
              &lt;/div&gt;
          })
  
          return (
              &lt;div className=&quot;outer-div-container&quot;&gt;
                  &lt;div&gt;
                      &lt;Container fluid&gt;
                          &lt;h3 className=&quot;player-list-header&quot;&gt;Top Players&lt;/h3&gt;
  
                          &lt;Table className=&quot;mt-4&quot;&gt;
                              &lt;thead&gt;
                              &lt;tr id=&quot;player-list-row&quot;&gt;
                                  &lt;th className=&quot;player-list-data-text&quot;&gt;Name&lt;/th&gt;
                                  &lt;th className=&quot;player-list-data-text&quot;&gt;Username&lt;/th&gt;
                                  &lt;th className=&quot;player-list-data-text&quot;&gt;Location&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                              {topUserList}
                              &lt;/tbody&gt;
                          &lt;/Table&gt;
  
                          {topTenUserList}
                      &lt;/Container&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  export default TopUserList;
  </code></pre>