CODEWITHSUNDEEP
javascriptreactjs
fg_st
fg_st

Reputation: 109

react sort list of components

I'm trying to update make that when the button is clicked then the function sortCategories is executed and the list of CategoryRow components is sorted but nothing change and there are no errors on the console

import React, { useEffect, useState} from 'react';
import './category.css';
import Header from "../Header";
import CategoryRow from "./CategoryRow";


// Clean empty categories
const filtered = window.CATEGORIES.filter(function(value, index, arr) {
    return value.labResults.length > 0;
});



export default function Category() {

    const [categories, setCategories] = useState(filtered)
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        setLoading(false)
    }, []);

    const sortCategories = () => {
        // Order by issues
        categories.sort((a,b) => {
            return b.issues - a.issues;
        });
        setCategories(categories);
    }

    return (
        <>
            <Header></Header>
            <div className="order-button-row">
                <button className="btn btn-primary" onClick={ sortCategories }>Order by issues</button>
            </div>
            <div className="card shadow py-2 mb-2">
                <div className="card-body">
                    {loading ? (
                        <div className={'text-center'}>
                            <span className="fa fa-spin fa-spinner fa-4x"></span>
                        </div>

                    ) : (
                        <div className={'row'}>
                            {categories.map(categoryInformation =>
                                <CategoryRow key={categoryInformation.category.id}
                                             category={categoryInformation.category}
                                             issues={categoryInformation.issues}></CategoryRow>
                            )}
                        </div>
                    )}
                </div>
            </div>
        </>
    )
}

Upvotes: 2

Views: 1144

Answers (1)

Amila Senadheera
Amila Senadheera

Reputation: 13235

Problem

In your code categories.sort does in-place sorting and when you do setCategories(categories), React simply ignores it since it is the same array reference as before (no reference change).

categories.sort((a,b) => {
  return b.issues - a.issues;
});
setCategories(categories);

Solution 1

Make a copy of the categories and then sort and update the state:

const categoriesCopy = [...categories];
categoriesCopy.sort((a,b) => {
    return b.issues - a.issues;
});
setCategories(categoriesCopy);

Solution 2

Use callback function of setter function:

setCategories(prevCategories => {
  const categoriesCopy = [...prevCategories];
  categoriesCopy.sort((a, b) => {
    return b.issues - a.issues;
  });
  return categoriesCopy;
});

Upvotes: 2

Related Questions