Context Provider not re-rendering on state change

this is the code.

const [coins, setCoins] = useState([])
const [sortedCoins, setSortedCoins] = useState([])

With useEffect, I request from an api code and store it in coins, then I store that same data in sortedCoins, then with this function I sort through that (There might be some missing } because its only one part of the function, essentially this is the part that sorts the data by name).

const sort = (e) => {
    let name = e.target.getAttribute("name");

    if (name === "cryptonames") {
      let temp = coins;

      temp = temp.sort((a, b) => {
        return a.name.localeCompare(b.name);
        
      });

      setSortedCoins(temp);
}

Now on another component I do this

{sortedCoins.map((coin) => {
        return <SpecificCoin key={coin.id} {...coin}></SpecificCoin>;
      })}

My problem is, even though the sorting is successful and the sortedCoins is an array sorted by names (I am using CoinGecko API for cryptocurriences), my SpecificCoin list is not re-rendered, it stays the default way.

Any help is much appreciated!

from Recent Questions - Stack Overflow https://ift.tt/35YTiTa
https://ift.tt/eA8V8J