title: Using React Hooks - State not updating
body: <p>I'm trying show a list of courses with a thumbnail for each course.</p>
  <p>The thumbnails are streamed back to browser via an imageService. The imageService returns a Blob to the browser &amp; Url for the image.</p>
  <pre><code>const [courses, setCourses] = useState([]);
  
  useEffect(() =&gt; {
      courseService
        .getCourses()
        .then((courses) =&gt; {
          let updatedCourses = [];        
          courses
            .forEach((course) =&gt; {
              if (course.enrolledCourse.imageThumbnailFileName) {
              imgageService
                  .downloadIMG(
                    course.imageThumbnailFileName
                  )
                  .then((data) =&gt; {
                    if (data.url) {
                      course.imageThumbnailURL = data.url;                                          
                    }  
                  })
              }
              updatedCourses.push(course)
            })
            console.log(updatedCourses) 
            setCourses(updatedCourses);        
        })     
    }, []);
  
  </code></pre>
  <p>Explaining the intended logic:</p>
  <ol>
  <li>Course service returns a list of courses</li>
  <li>Image service returns a Blob and URL for course thumbnail for each course to display in a list</li>
  <li>Each course is updated with the thumbnail image URL.</li>
  <li>setCourses to set the state to the updated courses</li>
  </ol>
  <p>The state (courses) does not update with the thumbnail URLs just the original unchanged course list. However, the <code>console.log(updatedCourses)</code> shows the URLs have been added into the array before the <code>setCourses(updatedCourses)</code>.</p>
  <p>How do I get the updated Courses (with added URLs) into my state object SetCourses? Appreciate any assistance.</p>
  <p><strong>UPDATE</strong> - trying to use Promises to resolve my issue this is my attempt so far.. What am doing wrong ..promises are not my strong point. enrolledCourses state is still not setting. Any ideas??</p>
  <p><strong>UPDATE 2</strong> SOLVED I have posted the working code as an answer below. I've also used the answer from this <a href="https://stackoverflow.com/a/47743443/2218103">question's Answer</a> from another question as the basis of my response...</p>
  <p>'''</p>
  <pre><code>    const [enrolledCourses, setEnrolledCourses] = useState([]);
  
      useEffect(() =&gt; {
       async function getThumbnails() {
       try {
        var collectionArray = [];
        studentService.getStudentEnrolledCourseList(user.id).then((courses) =&gt; {
          courses.enrolledCourses.forEach((course) =&gt; {
            let withId = {
              docId: course.id,
              course,
            };
  
            collectionArray.push(withId);
  
            imageService
              .downloadIMG(
                course.id,
                course.enrolledCourse.imageThumbnailFileName,
                match.params
              )
              .then((download) =&gt; {
                withId = {
                  ...withId,
                  imageThumbnailUrl: download.url,
                };
  
                collectionArray.push(withId);
              });
          });
  
          const getImageThumbnailUrl = (course) =&gt;
            studentService.downloadIMG(
              course.id,
              course.enrolledCourse.imageThumbnailFileName,
              match.params
            );
  
          const addThumbnailUrl = (course) =&gt;
            getImageThumbnailUrl(course).then((imageThumbnailUrl) =&gt; ({
              ...course,
              imageThumbnailUrl,
            }));
  
          Promise.all(collectionArray.map(addThumbnailUrl)).then((data) =&gt;
            setEnrolledCourses(data)
          );
        });
      } catch (e) {
        console.log(e);
      }
    }
    getThumbnails();
  }, []);
  </code></pre>