Как отсортировать список объектов внутри renerItem flatlist?

Question

Здравствуйте. Я хочу отсортировать объект в пределах renderItem из FlatList. Я получаю массив объектов в качестве ответа сервера. Я хочу выполнить сортировку в этих объектах. У меня есть список автомобилей с указанием их цены.Если пользователь сначала нажимает на кнопку сортировки автомобилей с самой низкой ценой. Я хочу показать автомобили с самой низкой ценой первыми в списке. Структура item в пределах renderItem выглядит следующим образом.

Расширенная структура одного item выглядит следующим образом. Я хочу отсортировать объект по его priceTotal.

Ниже приведен мой код, который я сделал до сих пор. Пожалуйста, помогите найти решение.

пример кода

 renderItems = ({ item, index }) => {
    return (
          <CarReservationDetailComponent
            carName={item.make}
            carType={item.carType}
            carPrice1={item.priceTotal}
            mileage
            mileageText={item.autonomy + 'km. restantes'}
            imageUri={item.picture}
          />
        )
      }
    .....
    <FlatList
                  data={this.props.value.value}
                  renderItem={this.renderItems}
                  ItemSeparatorComponent={this.renderSeparator}
                  showsVerticalScrollIndicator={false}
                />

Answer 1

class ParentComponent extends Component {
  sortItemByKey = key => {
    const { items } = this.state;
    const clonedItems = items.map(item => ({ ...item }));
    clonedItems.sort(compare);
    this.setState({ items: clonedItems });

    function compare(a, b) {
      if (a[key] < b[key]) return -1;
      if (a[key] > b[key]) return 1;
      return 0;
    }
  };

  render() {
    const { items } = this.State;
    return (
      <View>
        <ChildComponent value={{ value: items }} sortByKey={this.sortItemByKey} />
      </View>
    );
  }
}

class ChildComponent extends Component {
  // you should bind this method to onclick of sort button
  onClick = () => {
    this.props.sortByKey('priceTotal');
  };

  render() {
    return (
      <FlatList
        data={this.props.value.value}
        renderItem={this.renderItems}
        ItemSeparatorComponent={this.renderSeparator}
        showsVerticalScrollIndicator={false}
      />
    );
  }
}