DEV Community

Cover image for React: how to dynamically sort an array of objects using the dropdown (with React Hooks)

React: how to dynamically sort an array of objects using the dropdown (with React Hooks)

Katsiaryna (Kate) Lupachova on March 05, 2020

Assume we have the following problem: sort an array of objects do it dynamically based on different properties values render this in browser usin...
Collapse
 
muyembeii profile image
MuyembeII

Hello, thank you for this great tutorial. Could you help with sorting nested object. E.g location has nested fields city and town and lets say I wanted to filter by town

const bands = [
{
name: 'Nightwish',
albums: 9,
members: 6,
formed_in: 1996,
location: {
city: "Berlin",
town: "Cologne"
}
},
..............................................
];

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova

Hi, Muyembell! Thank you for your feedback!
As for your question, you can sort array of objects by nested property this way (if you need to compare strings):

array.sort((a,b) => a.location.city.localeCompare(b.location.city));

Please, check the full updated code of the tutorial example with nested property sorting here - branch nested-sorting.

Collapse
 
muyembeii profile image
MuyembeII

Thank you 🙌. Worked like a charm

Collapse
 
encryptblockr profile image
encryptblockr

is it possible to have this sort as a component? so one can use on multiple pages? thanks

Thread Thread
 
ramonak profile image
Katsiaryna (Kate) Lupachova

yes, of course, it's totally possible. Just pass initial data and and sort type as a props to this component. The exact implementation depends on your use case.

Collapse
 
avi_developer profile image
Avi Nash

It was frustrating because list was not rendered but your post resolved my issue. [...bands] works perfect. Thanks so much

Collapse
 
udittarini profile image
Udit Tarini

Hey thank you it worked really well

Collapse
 
codeindevelopment profile image
Code in dev

thanks a lot men , this code very very helped me for sort options in my project <3

Collapse
 
luisregardiz profile image
Luis Garcia Regardiz

Thank u, it was very helpful 👍

Collapse
 
fidelp27 profile image
Fide

Very very very thank you! I can't sleep in 3 days for that problem! Awesome ! Thank you again

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova

I know the feeling when you can't sleep due to some coding problem bothering you:) And you are very welcome!!!

Collapse
 
encryptblockr profile image
encryptblockr
Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova

Please check the answer - github.com/KaterinaLupacheva/react...

Collapse
 
encryptblockr profile image
encryptblockr

codesandbox link?

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova
Collapse
 
rishudc119 profile image
Deepak Chauhan

You are awesome man

Collapse
 
temi_ profile image
Temi-tayo

Why not map through the state "data" instead of "bands"?

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova

Actually it mapped through the state data, please check the full code in the repo. Map through "bands" happens only on the "early stage" of the tutorial.