I am trying to sort an array of objects by ‘title’ property. How can I switch sorting by Asc and Desc by a button toggle?
I have the below, but the data doesn’t sort by toggle
const [text, setText] = useState('');
const [data, setData] = useState([]);
const [toggleFilter, setToggleFilter] = useState(false);
const sortedArray = useMemo(
() =>
toggleFilter
? [...data].sort((a, b) => a.title - b.title)
: [...data].sort((a, b) => b.title - a.title),
[data, toggleFilter],
);
return (
<View>
<FlatList
style={styles.flatlist}
data={sortedArray}
renderItem={({ item }) => <Text>{item.title}</Text>}
keyExtractor={(item) => item.id}
/>
<View style={styles.container}>
<Pressable
style={styles.button}
onPress={() => setToggleFilter(!toggleFilter)}
testID="sort-direction">
<Text style={styles.text}>{toggleFilter ? '⬇️' : '⬆️'}</Text>
</Pressable>
</View>
</View>
);
};