Why sorting of the Flatlist is not appearing? in react native

I am currently making sorting order in Ascending and Descending but the flatlist is not appearing.

I want to show sorting order by recently added, low to high & high to low by each separate buttons.

please help.

below is my code:

const [ demoList, setdemoList ] = useState([
    {id: 3, name: 'Omkar'},
    {id: 2, name: 'Abhishek'},
    {id: 1, name: 'Saurabh'},
    {id: 1, name: 'Saurabh'},
    {id: 4, name: 'Chintan'},
    {id: 6, name: 'Hardik'},
    {id: 5, name: 'Lalit'},
  ]);
  const sortListById = () => {
    demoList.sort(function (obj1, obj2) {
      return obj1.id - obj2.id;
    });
  };

  return (
    <View style={styles.container}>
      <View style={{ margin: 10,alignItems: 'center',justifyContent: 'center',}}>
        <FlatList data={demoList}
          extraData={setdemoList}
          renderItem={({ item }) => (
            <View style={{ flexDirection: 'row' }}>
              <Text style={{ fontSize: 20, margin: 15 }}>{item.id}</Text>
              <Text style={{ fontSize: 20, margin: 15 }}>{item.name}</Text>
            </View>
          )}
          keyExtractor={(item, index) => index}
        />
        <View style={{ flex: 1 }}>
          <Button title="Sort List" onPress={sortListById} />
        </View>
      </View>
    </View>
  );

full code is here: https://snack.expo.dev/@john.ocean/16c137

Answer

Working Example: Expo Snack, here you can sort by both ASC and DEC order.

Output:

enter image description here

Solution:

import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList, Button } from 'react-native';
let data = [
  { id: 3, name: 'Omkar' },
  { id: 2, name: 'Abhishek' },
  { id: 1, name: 'Saurabh' },
  { id: 1, name: 'Saurabh' },
  { id: 4, name: 'Chintan' },
  { id: 6, name: 'Hardik' },
  { id: 5, name: 'Lalit' },
];
export default function Home() {
  const [demoList, setdemoList] = useState([...data]);
  const [order, setOrder] = useState(1);
  const sortListASC = () => {
    demoList.sort((obj1, obj2) => {
      return obj1.id - obj2.id;
    });

    setdemoList([...demoList]); // update
  };

  const sortListDES = () => {
    demoList.sort((obj1, obj2) => {
      return obj2.id - obj1.id;
    });
    setdemoList([...demoList]);
  };

  return (
    <View style={styles.container}>
      <View
        style={{ margin: 10, alignItems: 'center', justifyContent: 'center' }}>
        <FlatList
          data={demoList}
          renderItem={({ item }) => (
            <View style={{ flexDirection: 'row' }}>
              <Text style={{ fontSize: 20, margin: 15 }}>{item.id}</Text>
              <Text style={{ fontSize: 20, margin: 15 }}>{item.name}</Text>
            </View>
          )}
          keyExtractor={(item, index) => index}
        />
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <View style={{ marginLeft: 10 }}>
            <Button title={'ASC'} onPress={sortListASC} />
          </View>
          <View style={{ marginLeft: 10 }}>
            <Button title={'DEC'} onPress={sortListDES} />
          </View>
          <View style={{ marginLeft: 10 }}>
            <Button title={'Default'} onPress={() => setdemoList([...data])} />
          </View>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});