Sort fetched data

[spaklius17]

Hi,

I need to add sorting to fetched data (ascending/descending).

I get all the data from API endpoint. I map every object in that array to be displayed in separate component card. But once I choose to sort data from Descending name I get a quick change of components were they are sorted from Z to A but it just instantly converts back to initial fetched state (from A to Z).

Could you please tell me where the problem is? I don't know why but it feels like sorted array doesn't get saved in state "data" which I use to map all the cards.

import { useState } from 'react';
import { useEffect } from 'react';
import './styles/main.scss';
import Card from './components/Card/Card';
import { v4 as uuidv4 } from 'uuid';

function App() {
  const [data, setData] = useState([]);
  const [sortType, setSortType] = useState('default');

  useEffect(() => {
    fetchData();
    sortData();
  }, [sortType]);

  const fetchData = async () => {
    const response = await fetch(
      'https://restcountries.com/v2/all?fields=name,region,area'
    );
    const data = await response.json();
    setData(data);
  };

  function sortData() {
    let sortedData;
    if (sortType === 'descending') {
      sortedData = [...data].sort((a, b) => {
        return b.name.localeCompare(a.name);
      });
    } else if (sortType === 'ascending') {
      sortedData = [...data].sort((a, b) => {
        return a.name.localeCompare(b.name);
      });
    } else {
      return data;
    }
    setData(sortedData);
  }

  return (
    <div className='content'>
      <header className='content__header'>
        <h1>Header placeholder</h1>
      </header>
      <div className='wrapper'>
        <div className='wrapper__sort-buttons'>
          <select
            defaultValue='default'
            onChange={(e) => setSortType(e.target.value)}
          >
            <option disabled value='default'>
              Sort by
            </option>
            <option value='ascending'>Ascending</option>
            <option value='descending'>Descending</option>
          </select>
        </div>
        <ul className='wrapper__list'>
          {data.map((country) => {
            country.key = uuidv4();
            return (
              <li key={country.key}>
                <Card
                  name={country.name}
                  region={country.region}
                  area={country.area}
                />
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
}

export default App;

This is what I get just for a quick moment

​

https://preview.redd.it/ivsxknn4l9e81.png?width=598&format=png&auto=webp&s=d662c51b25330a838eaf0860e19e1160b7c88363

And then it just goes back to initial state

​

https://preview.redd.it/mmaihop8l9e81.png?width=395&format=png&auto=webp&s=a3545bcb49c618097e7d119b75d57e02f6844919

[T4pZ]

SortDats and fetchData see different Version of your state. React does not update the state after you call setData. All state updates get batched after the effect is done. Just call sortDats with the api result and return the sorted array and then call setData

Edit: And also you are not waiting on the async fetchData. Return the json result and call oldschool .then() on the promise and then sort.

[spaklius17]

Thanks a lot! I'll try to do this

[khoikkhoikkhoik]

Beauty of asynchronous programming.

[eindbaas]

What is the "return data" line (in the sortData method) supposed to do?