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>
</>
)
}
CodePudding user response:
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;
});