function App() {
const [users,setUsers] = useState([])
useAsyncEffect(async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/users')
const data = await res.json()
setUsers(data)
}, [])
console.log(users)
function sortCity () {
users.sort((x,y) => {
if(x.address.city < y.address.city) {return -1}
if(x.address.city > y.address.city) {return 1}
return 0
})
console.log(users)
}
function sortCompany () {
users.sort((x,y) => {
if(x.company.name < y.company.name) {return -1}
if(x.company.name > y.company.name) {return 1}
return 0
})
console.log(users)
}
<SortButton button={sortCity} text="по городу" />
<SortButton button={sortCompany} text="по компании"/>
Console logs are displayed, but it doesn't re-render.
.sort array method mutates the state and you should avoid this. You cannot mutate anything in React, because it is not able to re-render. You should set the new state directly.
In your case you should create a new array, sort it, and set into your state:
function sortCompany () {
const sortedUsers = [...users]
sortedUsers.sort((x,y) => {
if(x.company.name < y.company.name) {return -1}
if(x.company.name > y.company.name) {return 1}
return 0
})
setUsers(sortedUsers);
}