DEV Community

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

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 Author

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 Author

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.