sort an array with react hooks
10,524
Solution 1
First: because Array.prototype.sort()
is in place, clone before you sort:
const sorted = [...dogList].sort((a, b) => {
return b.age - a.age;
});
Without this the change detection will not detect the array changed.
You call map on dogs
. Fix:
return (
<div>
{dogList.map((dog, i) => {
return <p key={i}>{dog.name}</p>;
})}
<div onClick={sortByAge}>sort by age</div>
</div>
);
Demo: https://jsfiddle.net/acdcjunior/kpwb8sq2/1/
Solution 2
const dogs = [{ name: "fido", age: 22 }, { name: "will", age: 50 }];
class Application extends React.Component {
state = {dogList: dogs};
sortByAge = () => {
const sorted = this.state.dogList.sort((a, b) => {
return b.age - a.age;
});
this.setState({dogList: sorted});
};
render() {
return (
<div>
{this.state.dogList.map((dog, i) => {
return <p key={i}>{dog.name}</p>;
})}
<button onClick={this.sortByAge}>sort by age</button>
</div>
);
}
}
React.render(<Application />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="root"></div>
This is the code using hooks
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const dogs = [{ name: "fido", age: 22 }, { name: "will", age: 50 }];
function Application() {
const [dogList, setDogList] = useState(dogs);
const sortByAge = () => {
const sorted = dogList.sort((a, b) => {
return b.age - a.age;
});
setDogList(sorted);
};
return (
<div>
{dogList.map((dog, i) => {
return <p key={i}>{dog.name}</p>;
})}
<button onClick={sortByAge}>sort by age</button>
</div>
);
}
ReactDOM.render(<Application />, document.getElementById('root'));
Related videos on Youtube
Author by
seattleguy
Updated on August 03, 2022Comments
-
seattleguy over 1 year
I'm doing a simple sort of an array with react hooks, but its not updating state. Can anyone point out what I'm going here?
import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const dogs = [{ name: "fido", age: 22 }, { name: "will", age: 50 }]; function App() { const [dogList, setDogList] = useState(dogs); const sortByAge = () => { const sorted = dogList.sort((a, b) => { return b.age - a.age; }); setDogList(sorted); alert(sorted[0].name); }; return ( <div> {dogs.map((dog, i) => { return <p key={i}>{dog.name}</p>; })} <div onClick={sortByAge}>sort by age</div> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
-
seattleguy over 4 yearsI knew it was something related to this ty!
-
Miro J. over 4 yearsNice answer. Just add some explanation and context next time.
-
evolutionxbox over 4 yearsWhy did you provide an answer using a class component when the request was for a solution using hooks? (Your answer is not wrong btw)
-
syjsdev over 4 years@evolutionxbox. because I want to show you a live example with code snippet. so I use class component. but if you want I will provide example which uses the hooks.
-
evolutionxbox over 4 yearsNo no that’s fine. It just seemed odd to me that’s all