title: React.js - Sorting of nested arrays
body: <p>My payload has the following data :</p>
  <pre><code>[
    {
      reports: [
        { title: 'Nio', active: True },
        { title: 'Nikola', active: False },
        { title: 'Tesla', active: True },
      ],
      dashboard_title: 'EV',
      created_on: 1653263788,
      ranking:4
    },
    {
      reports: [
        { title: 'corolla', active: True },
        { title: 'camry', active: True },
        { title: 'Volkswagen Golf GTI', active: True },
      ],
      dashboard_title: 'affordable',
      created_on: 154363788,
      ranking: 2
    },
    {
      reports: [
        { title: 'bmw z4', active: True },
        { title: 'Chevrolet Corvette', active: True },
        { title: 'porsche', active: True },
      ],
      dashboard_title: 'sports',
      created_on: 154363788,
      ranking: 1
    },
  ];
  </code></pre>
  <p>and I need to first sort this payload by ranking, for reports array nested - I need to sort reports in each category by title:</p>
  <p>Here is my action:</p>
  <pre><code>export const getCategories = (param) =&gt; async (dispatch) =&gt; {
    const res = await axios.get(`{api}/dahsboard?{params}`, {
      headers: {},
    });
    const { data } = res;
    const data = data.sort(function (a, b) {
      return a.ranking - b.ranking;
    });
    let i;
    for (i = 0; i &lt; data.length; i++) {
      data[i].reports = data[i].reports.sort((a, b) =&gt;
        a.title.localeCompare(b.title)
      );
    }
    dispatch({
      type: DASHBOARD,
      payload: data,
    });
  };
  
  </code></pre>
  <p>but this ain't working? is there any clean way to do it?</p>