React Js - Table doesn't sort names

Question

So I've got this table in React. It works fine with all the columns except the one with the country name. I checked API so className definitely matches with it and I am a bit clueless how to fix it.

const Table = () => {
    const[country, setCountry] = useState([]);
    const[toggle, setToggle] = useState(true);

    const sortColumnNumber = (sort, columnName, data) => {
      data = data.sort((a, b) => {
        return sort ? b[columnName] - a[columnName] : a[columnName] - b[columnName];
      });
    }

    useEffect(() => {
        const loadData = async() => {
          await fetch('https://api.covid19api.com/summary')
          .then(response => response.json())
          .then(data => {
          const stats = data.Countries;
          sortColumnNumber(toggle, 'TotalConfirmed', stats)
          setCountry(stats);
          })
          }
          loadData();
    }, []);

    return(
        <React.Fragment>
            <table className="table table-bordered table-stripped">
        <thead >
        <tr onClick={(e) =>{
            setToggle(!toggle);
            sortColumnNumber(toggle, e.target.className, country);
        }} style={{cursor: "pointer"}} className="thead-dark">
          <th className="Country" scope="col">Country</th>
          <th className="TotalConfirmed" scope="col">Total Cases</th>
          <th className="NewConfirmed" scope="col">New Cases</th>
          <th className="NewDeaths" scope="col">New Deaths</th>
          <th className="TotalDeaths" scope="col">Total Deaths </th>
          <th className="TotalRecovered" scope="col">Total Recovered </th>
        </tr>
        </thead>
          <tbody>
          <CountryStats country={country} />
          </tbody>
          </table>
          </React.Fragment>
    )
}

Gabriel Willemann · Accepted Answer · 2020-11-09 16:45:05Z

2

Try something like that:

const sortColumnNumber = (sort, columnName, data) => {
  data = data.sort((a, b) => {
    let [first, second] = sort ? [a, b] : [b, a];

    if (first[columnName] < second[columnName]) return -1;
    if (first[columnName] > second[columnName]) return 1;
    return 0;
  });
};

It's important to return -1 or 0 or 1 to avoid problem with data types.

See more about sort method in this link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

edited Nov 9, 2020 at 16:45

answered Nov 9, 2020 at 14:00

Gabriel Willemann

1,9211 gold badge9 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajeev Singh · Accepted Answer · 2020-11-09 13:55:30Z

0

It doesn't work with country name because it is a String type and your callback method logic will not work for sorting Strings.

Subtracting two String values results in NaN.

Refer to this SO answer for sorting Strings.

edited Nov 9, 2020 at 13:55

answered Nov 9, 2020 at 13:48

Rajeev Singh

3,3322 gold badges23 silver badges30 bronze badges

Collectives™ on Stack Overflow

React Js - Table doesn't sort names

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related