Проблема обращения массива объекта с определенным ключом в JavaScript (React)

Question

Я получаю внешний API, и у меня возникают проблемы при обращении определенного ключа при нажатии на таблицу.

Вот мой код:

[
  {
    id: 2353,
    name: "Some Product",
    current_price: 5413,
  },
  {
    id: 435,
    name: "Other Product",
    current_price: 159.766,
  },
]

  reversePrice = () => {
    const reversePrice = this.state.data.map(obj => obj.current_price);
    this.setState({
      data: reversePrice
    })
  }

 <Th onClick = {() => this.reversePrice()}>Price</Th>

Answer 1

Вам нужно отсортировать свой продукт вместо карты.

products = products.sort((a,b)=> a.current_price - b.current_price);

let products = [
{
id: 2353,
name: "Some Product",
current_price: 5413,
},
{
id: 435,
name: "Other Product",
current_price: 159.766,
},
];

products = products.sort((a,b)=> a.current_price - b.current_price);

console.log(products)

Answer 2

В этом случае вам понадобится другое состояние, указывающее текущий порядок (desc / asec), и используйте эту информацию в вашем jsx.

reversePrice = () => {
    this.setState({
      desc: !this.state.desc
    })
}

А в функции рендеринга

const {data, desc} = this.state
const sortBy = (a, b) => (a.current_price - b.current_price) * (desc ? 1 : -1)
return <div> { data.sort(sortBy).map(item => <article> {JSON.stringify(item)} </article>) ) } </div>