title: Sort array in ascendent order in React
body: <p>I want to sort an array of cards by name whenever I click on a control button located in another component. I´m using useContext. The sort method is not working when I use it like this.
  console.log(&quot;array&quot;,players.sort((a,b) =&gt; b.realName - a.realName)</p>
  <pre><code>enter code here
  import { createContext, useContext, useEffect, useState } from &quot;react&quot;;
  import api from &quot;./api/players&quot;
  
  const APIcontext = createContext();
  
  export function Provider({children}){
  
      const [players, setPlayers] = useState([]);
      const [currentPlayer, setCurrentPlayer] = useState(null)
  
    useEffect(() =&gt; {
  
      const fetchPlayers = async () =&gt; {
  
        try{
          const response = await api.get('/players');
          setPlayers(response.data)         
          
        }
  
        catch(err){
  
          if(err.response){
            console.log(err.response.data)
          }else{
             
            console.log(`Error: ${err.message}`)
          }
            
        }
      }
      
      fetchPlayers()
    },[])
  
    
   const UpdateDetails = (player) =&gt; setCurrentPlayer(player)
  
   const SortAsc = () =&gt; {
     
    console.log(&quot;array&quot;,players.sort((a,b) =&gt; b.realName - a.realName))
   }
  
      return(
          &lt;APIcontext.Provider value={{players, currentPlayer,UpdateDetails, SortAsc}}&gt;{children}&lt;/APIcontext.Provider&gt;
      )
  }
  
  
  
  export default APIcontext;
  </code></pre>
  <hr />
  <p>Controls Component. Here is the button that sorts the array.</p>
  <pre><code>    import { createContext, useContext, useEffect, useState } from &quot;react&quot;;
  import api from &quot;./api/players&quot;
  
  const APIcontext = createContext();
  
  export function Provider({children}){
  
      const [players, setPlayers] = useState([]);
      const [currentPlayer, setCurrentPlayer] = useState(null)
  
    useEffect(() =&gt; {
  
      const fetchPlayers = async () =&gt; {
  
        try{
          const response = await api.get('/players');
          setPlayers(response.data)         
          
        }
  
        catch(err){
  
          if(err.response){
            console.log(err.response.data)
          }else{
             
            console.log(`Error: ${err.message}`)
          }
            
        }
      }
      
      fetchPlayers()
    },[])
  
    
   const UpdateDetails = (player) =&gt; setCurrentPlayer(player)
  
   const SortAsc = () =&gt; {
     
    console.log(&quot;array&quot;,players.sort((a,b) =&gt; b.realName - a.realName))
   }
  
      return(
          &lt;APIcontext.Provider value={{players, currentPlayer,UpdateDetails, SortAsc}}&gt;{children}&lt;/APIcontext.Provider&gt;
      )
  }
  
  
  
  export default APIcontext;
  </code></pre>
  <hr />
  <p>card Component. This is the component I want to render the sorted cards</p>
  <pre><code>import React, { useEffect, useState, useContext } from &quot;react&quot;;
  import Card from &quot;react-bootstrap/Card&quot;;
  import APIcontext from &quot;../context&quot;;
  import Details from &quot;./Details&quot;;
  
  function Cards({}) {
    const { players } = useContext(APIcontext);
    console.log(&quot;players&quot;, players);
  
    const { UpdateDetails} = useContext(APIcontext)
  
    return (
      &lt;&gt;
        {players &amp;&amp;
          players.map((player) =&gt; (
            &lt;Card
              key={player.id}
              className=&quot;mt-4 mx-2&quot;
              style={{
                display: &quot;flex&quot;,
                width: &quot;12rem&quot;,
                height: &quot;9rem&quot;,
                whiteSpace: &quot;nowrap&quot;,
                overflow: &quot;hidden&quot;,
                textOverflow: &quot;ellipsis&quot;,
              }}
            &gt;
              &lt;Card.Body onClick={()=&gt; UpdateDetails(player)}&gt;
               
                &lt;Card.Title&gt;{player.realName}&lt;/Card.Title&gt;
                &lt;Card.Subtitle className=&quot;mb-2 text-muted&quot;&gt;
                  {player.playerName}
                &lt;/Card.Subtitle&gt;
                &lt;Card.Text&gt;{player.asset}&lt;/Card.Text&gt;
              &lt;/Card.Body&gt;
            &lt;/Card&gt;
          ))}
      &lt;/&gt;
    );
  }
  
  export default Cards;
  </code></pre>
  <p>I would appreciate any help.</p>