title: Promise within another promise
body: <p>I have a promise that gets for each <code>department</code> its <code>categories</code>, I have to add another level- for each <code>category</code> to get its <code>subcategories</code>.</p>
  
  <p>I added another promise, I'm just wondering if this is the right way to do it, please advise.</p>
  
  <pre><code>componentDidMount = async () =&gt; {
      const departments = await getDepartments();
      const departmentsWithcategories = await Promise.all(
        departments.map(async department =&gt; {
          const categories = await getCategories(department.id);
          categories.map(async category =&gt; {
            const subCategories = await getSubCategories(category.id);
            return { ...categories, subCategories };
          });
          return { ...department, categories };
        }),
      );
      this.setState({ departmentsWithcategories });
    };
  </code></pre>
  
  <p>Function before change:</p>
  
  <pre><code>componentDidMount = async () =&gt; {
      const departments = await getDepartments();
      const departmentsWithcategories = await Promise.all(
        departments.map(async department =&gt; {
          const categories = await getCategories(department.id);
          return { ...department, categories };
        }),
      );
      this.setState({ departmentsWithcategories });
    };
  </code></pre>