title: How to rewrite code using then block using javascript, react and cypress?
body: <p>i have the code like below which uses lot of nested then clauses. this code is for testing my code written in javascript and react using cypress.</p>
  <pre><code>{
  export const waitForItems = (retries, nrItems) =&gt; {
      cy.apiGetItems().then(items =&gt; {
          if(items.length!== nrItems &amp;&amp; retries &gt; 0) {
              cy.wait(1000);
              return waitForItems(retries -1, nrItems);
          }
          expect(items.length).to.be.equal(nrItems);
      });
  };
  
  const item = {
      name: 'name1',
  };
  const itemFamily = 'ItemFamily1';
  const subfamily = {
      name: 'subfamily1',
  }
  
  describe('some test', () =&gt; {
      before(() =&gt; {
          cy.clickButtonByLabel('Click');
          switchUser(USERNAME);
          waitForItems(NUMBEROFRETRIES, NUMBEROFITEMS);
  
          cy.apiGetItems({ name: item.name })
              .then(createdItem =&gt; {
                  item.id = createdItem[0].id;
          })
          .then(() =&gt; {
              cy.apiGetItemFamily({
                  name: itemFamilyName,
              }).then(family =&gt; {
                  cy.apiGetSubFamily({
                      name: subfamily1.name,
                      item__family__id__in: family[0].id,
                  }).then(subfamily =&gt; {
                      subfamily1.id = subfamily[0].id; //error here says cannot read 
                      // id of undefined
                      cy.apiPostSomething({
                          ...something,
                          items: [item.id],
                          subfamily: [subfamily1.id],
                      }).then(createdSomething =&gt; {
                          something.id = createdSomething.id;
                          cy.apiGetItemVariable({
                              key: ItemVariableName,
                              subfamily__id__in: subfamily1.id,
                          }).then(variable =&gt; {
                              cy.apiPostVariableValue({
                                  variable: variable[0].id,
                                  value: controlValue,
                              }).then(() =&gt; {
                                  cy.apiGetsubFamily({
                                      name: subfamily1.name,
                              }).then(newControl =&gt; {
                                  const versions =
                                      newControl[0].versions;
                                  const latestVersionControl = versions.find(
                                      v =&gt; v.version === '3.9.0'
                                  );
                                  const id = latestVersionControl.id;
                                  cy.apiPatchSomething({
                                      id: Something.id,
                                      controls: [id], 
                                  });
                              });
                          });
                      });
                  });
              });
          });
      });
  });
  </code></pre>
  <p>The above code works fine. but sometimes i get error &quot;cannot read id of undefined&quot; in the then(subfamily) clause.</p>
  <p>i am not sure why subfamily[0] is still not available when trying to assign it like so</p>
  <pre><code> .then(subfamily =&gt; {
       subfamily1.id = subfamily[0].id;
   }
  </code></pre>
  <p>could someone help me fix this. thanks.</p>