title: How to wait for response of fetch in async function?
body: <p>If I look in the console it is giving me:</p>
  
  <pre><code>coursesbody is: 
  Promise { "pending" }
  ​
  &lt;state&gt;: "pending"
  </code></pre>
  
  <pre><code>const fetchCourses = async args =&gt; {
      await fetch(`/coursemanagement/getschoolcourse`, {
        method: "POST",
        body: JSON.stringify({ schoolId: currentSchool2 }),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res =&gt;{
        const body = res.json();
        console.log("coursesbody is:", body)
        return res.json()
      })
    };
  </code></pre>
  
  <p>What is the proper way to wait for the response. I have a hard time wrapping my head around await/async in js.</p>
  
  <p>EDIT:
  In useEffect I am now calling</p>
  
  <pre><code>useEffect(() =&gt; {
      setSchoolsCoursesDocents()
  }
  </code></pre>
  
  <p>with setSchoolsCoursesDocents() being:</p>
  
  <pre><code> const setSchoolsCoursesDocents = async () =&gt; {
      const schools= await fetchSchools();
      const courses = await fetchCourses(schools);
      const docents = await fetchDocents(courses);
    };
  
  </code></pre>
  
  <p>fetchSchools looks like:</p>
  
  <pre><code>const fetchSchools = async () =&gt; {
      const result = await fetch(`/coursemanagement/getschools`, {
        method: "GET"
      });
      const body = await result.json();
      setSchools(body);
      setCurrentSchool1(body[0].id)
      setCurrentSchool2(body[0].id)
    };
  </code></pre>
  
  <p>The state currentSchool2 is then used in:</p>
  
  <pre><code> const fetchCourses = async args =&gt; {
      console.log("currentSchool2 is", currentSchool2)
      const result = await fetch(`/coursemanagement/getschoolcourse`, {
        method: "POST",
        body: JSON.stringify({ schoolId: currentSchool2 }),
        headers: {
          "Content-Type": "application/json"
        }
      });
      const body = await result.json();
      setCourses(body);
      setCurrentCourse(body[0].courseId);
    };
  </code></pre>
  
  <p>However the console.log is undefined, but currentSchool2 should be set to 1 by the first fetch</p>