How to order by 'something' in React Native FlatList?

user_12710864 0
Viewed 2374

Here is my entire code at Home.js file

export default function Home({navigation}) {

const [reviews, setReviews] = useState([
    { title: 'Alfa Romeo 147 1.9JTD', rating: 2020, body: 340000, sg: ['ABS ',  'CD ', 'ESP '], key: '1' },
    { title: 'Gotta Catch Them All (again)', body: 'lorem ipsum', key: '2' },
    { title: 'Not So "Final" Fantasy', body:'lorem ipsum', key: '3' },
    { title: 'Alfaromeo', rating: 3200, body: 'blablabla', first:'loremlo', key: '4' },
    { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '5' },
    { title: 'Not So "Final" Fantasy', rating: 3, body: 'lorem ipsum', key: '6' },
    { title: 'Alfaromeo', rating: 3200, body: 'sadaa', key: '7' },
    { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '8' },
    
  ]);

 return (
<View style={styles.container}>
<FlatList data={reviews} renderItem={({ item }) => (
    <TouchableOpacity onPress={() => navigation.navigate('ReviewDetails', item)}>
        
        <View style={styles.content}>
            <Image
            style={styles.image}
            source={{
            uri: 'https://www.autoplac-cg.me/storage/1871/conversions/5f9eb91821de1_20FB3486-4A0A-4B4A-B13C-CAE912950E22-thumb.jpg',
            }}
            />
            <Text style={styles.headertext}>{item.title }</Text>
            <Text style={styles.infotext}>{item.rating}god. | {item.body}km <Text style={styles.collapse}>+</Text></Text>
        </View>
    </TouchableOpacity>
  )} />
</View>

); }

So I want to put first on FlatList that review who has in array 'first', so in code its fourth. How I can do that?

I want to this be first on FlatList

{ title: 'Alfaromeo', rating: 3200, body: 'blablabla', first:'loremlo', key: '4' }

react-native reactjs javascript
3 Answers

I believe that the best way to do that is to sort the data as needed and then render it with FlatList.

The sort logic may be the way you need, which means that you are free to "order by 'anything'" if you wish.

According to the data set and information you provided, the business rule, as I understood, is to show the items with fisrt flag at first place. So, the sorting could be like this:

export default function Home({navigation}) {
  const [reviews, setReviews] = useState([
    { title: 'Alfa Romeo 147 1.9JTD', rating: 2020, body: 340000, sg: ['ABS ',  'CD ', 'ESP '], key: '1' },
    { title: 'Gotta Catch Them All (again)', body: 'lorem ipsum', key: '2' },
    { title: 'Not So "Final" Fantasy', body:'lorem ipsum', key: '3' },
    { title: 'Alfaromeo', rating: 3200, body: 'blablabla', first:'loremlo', key: '4' },
    { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '5' },
    { title: 'Not So "Final" Fantasy', rating: 3, body: 'lorem ipsum', key: '6' },
    { title: 'Alfaromeo', rating: 3200, body: 'sadaa', key: '7' },
    { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '8' },
  ]);

  function renderItem(item) {
    return (
      <TouchableOpacity onPress={() => navigation.navigate('ReviewDetails', item)}>
          <View style={styles.content}>
              <Image
                style={styles.image}
                source={{
                uri: 'https://www.autoplac-cg.me/storage/1871/conversions/5f9eb91821de1_20FB3486-4A0A-4B4A-B13C-CAE912950E22-thumb.jpg',
                }}
              />
              <Text style={styles.headertext}>{item.title}</Text>
              <Text style={styles.infotext}>{item.rating}god. | {item.body}km <Text style={styles.collapse}>+</Text></Text>
          </View>
      </TouchableOpacity>
    );
  }

  function sortData() {
    let sortedArray = [];

    // If the item contains "first" property, it will be placed at the beginning of the sortedArray, else it will be at the end of it
    reviews.forEach(review => (
      review.first
        ? sortedArray = [review, ...sortedArray]
        : sortedArray.push(review)
    ));

    return sortedArray;
  }

 return (
  <View style={styles.container}>
    <FlatList
      data={sortData()}
      renderItem={({ item }) => renderItem(item)}
    />
  </View>
 );
}

I moved the code to render an item to a separated function just for convenience

user_137889030
user_145293790

You can do is

var reviews1 = reviews.filter(function (el) {
  return el["first"];
});

var reviews2 = reviews.filter(function (el) {
  return el["first"] === undefined;
});

const reviewsFinalArray = reviews1.concat(reviews2); // Your result
user_12833450
Related