title: how to sort the data from json for the different different routes?
body: <p>this is my app.js
  The app.js file render the Leaderboard component for each route like /rank,/point,/age,/name</p>
  <pre><code>    &lt;Router&gt;
              &lt;Switch&gt;
                  &lt;Route path=&quot;/&quot;&gt;
                      &lt;div className=&quot;App&quot;&gt;
                          &lt;h8k-navbar header={title}&gt;&lt;/h8k-navbar&gt;
                          &lt;LeaderBoard /&gt;
                      &lt;/div&gt;
                  &lt;/Route&gt;
                  &lt;Route path=&quot;/name&quot;&gt;
                      &lt;div className=&quot;App&quot;&gt;
                          &lt;h8k-navbar header={title}&gt;&lt;/h8k-navbar&gt;
                          &lt;LeaderBoard /&gt;
                      &lt;/div&gt;
                  &lt;/Route&gt;
                  &lt;Route path=&quot;/rank&quot;&gt;
                      &lt;div className=&quot;App&quot;&gt;
                          &lt;h8k-navbar header={title}&gt;&lt;/h8k-navbar&gt;
                          &lt;LeaderBoard sorted = {lists}/&gt;
                      &lt;/div&gt;
                  &lt;/Route&gt;
                  &lt;Route path=&quot;/age&quot;&gt;
                      &lt;div className=&quot;App&quot;&gt;
                          &lt;h8k-navbar header={title}&gt;&lt;/h8k-navbar&gt;
                          &lt;LeaderBoard /&gt;
                      &lt;/div&gt;
                  &lt;/Route&gt;
                  &lt;Route path=&quot;/points&quot;&gt;
                      &lt;div className=&quot;App&quot;&gt;
                          &lt;h8k-navbar header={title}&gt;&lt;/h8k-navbar&gt;
                          &lt;LeaderBoard /&gt;
                      &lt;/div&gt;
                  &lt;/Route&gt;
              &lt;/Switch&gt;
          &lt;/Router&gt;
  </code></pre>
  <p>this is my json:
  here is my data contain rank,point,name,age.
  I want this detail should be sorted by rank,point,name,age .that is when the route is /rank
  The table data in Leaderboard should be sorted by rank and render that</p>
  <pre><code>    {&quot;list&quot;:[
          {
              &quot;rank&quot;:&quot;1&quot;,
              &quot;points&quot;:&quot;1025&quot;,
              &quot;name&quot;:&quot;John Doe&quot;,
              &quot;age&quot;:&quot;27&quot;
          },
          {
              &quot;rank&quot;:&quot;3&quot;,
              &quot;points&quot;:&quot;245&quot;,
              &quot;name&quot;:&quot;Elizabeth&quot;,
              &quot;age&quot;:&quot;17&quot;
          },
          {
              &quot;rank&quot;:&quot;2&quot;,
              &quot;points&quot;:&quot;566&quot;,
              &quot;name&quot;:&quot;Samantha&quot;,
              &quot;age&quot;:&quot;22&quot;
          }]
      }
      
  </code></pre>
  <p>This is my leaderboard component</p>
  <pre><code>    function LeaderBoard({sorted}) {
      let history = useHistory();
      let newList;
      console.log(sorted); 
      let lists = response.list
      const handleClick =()=&gt;{
          history.push('/rank')
      }
      return (
          &lt;div className=&quot;text-center mt-50&quot;&gt;
              &lt;div&gt; 
                  &lt;div&gt;
                      &lt;button data-testid=&quot;route-rank&quot; className='outlined' type=&quot;button&quot; onClick={handleClick}&gt;Rank&lt;/button&gt;
                      &lt;button data-testid=&quot;route-name&quot; className='outlined' type=&quot;button&quot;&gt;Name&lt;/button&gt;
                      &lt;button data-testid=&quot;route-points&quot; className='outlined' type=&quot;button&quot;&gt;Points&lt;/button&gt;
                      &lt;button data-testid=&quot;route-age&quot; className='outlined' type=&quot;button&quot;&gt;Age&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;card mx-auto pb-20 mb-30&quot; style={{ width: '50%' }}&gt;
                  &lt;table className=&quot;mt-50&quot; data-testid=&quot;app-table&quot;&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Rank&lt;/th&gt;
                              &lt;th&gt;Name&lt;/th&gt;
                              &lt;th className=&quot;numeric&quot;&gt;Points&lt;/th&gt;
                              &lt;th className=&quot;numeric&quot;&gt;Age&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody data-testid=&quot;app-tbody&quot;&gt;
                      {lists.map((ele,index)=&gt;{
                          // console.log(index)
                          return(
                              &lt;tr key={ele.rank}&gt;
                                  &lt;td data-testid={`rank-${index}`}&gt;{ele.rank}&lt;/td&gt;
                                  &lt;td data-testid={`name-${index}`}&gt;{ele.name}&lt;/td&gt;
                                  &lt;td data-testid={`points-${index}`} className=&quot;numeric&quot;&gt;{ele.points}&lt;/td&gt;
                                  &lt;td data-testid={`age-${index}`} className=&quot;numeric&quot;&gt;{ele.age}&lt;/td&gt;
                              &lt;/tr&gt;
                          )
                      })}
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  export default LeaderBoard;
  </code></pre>
  <p>how to sort the json file by each rank,name,point,age and render it</p>