I have products data which I am importing in my displaycomponent. For each product in JSON I am using `.map()` to display the content. Now I want to sort the products price in ascending or descending order but I am not able to do it.

products.js:

```
 const products = [
  {
    "index": 0,
    "isSale": true,
    "isExclusive": false,
    "price": "Rs.2000",
    "productImage": "product-1.jpg",
    "productName": "Striped shirt",
    "size": ["XS", "S", "L", "XL"]
  },
  {
    "index": 1,
    "isSale": false,
    "isExclusive": false,
    "price": "Rs.1250",
    "productImage": "product-2.jpg",
    "productName": "Denim shirt",
    "size": ["XS", "S"]
  },
  {
    "index": 2,
    "isSale": false,
    "isExclusive": true,
    "price": "Rs.1299",
    "productImage": "product-3.jpg",
    "productName": "Plain cotton t-shirt",
    "size": ["S", "M"]
  },
  {
    "index": 3,
    "isSale": false,
    "isExclusive": false,
    "price": "Rs.1299",
    "productImage": "product-4.jpg",
    "productName": "Plain 3/4 sleeve cotton t-shirt",
    "size": ["XL"]
  },
  {
    "index": 4,
    "isSale": false,
    "isExclusive": false,
    "price": "Rs.2500",
    "productImage": "product-5.jpg",
    "productName": "White dress shirt",
    "size": ["M", "L"]
  },
  {
    "index": 5,
    "isSale": false,
    "isExclusive": false,
    "price": "Rs.2399",
    "productImage": "product-6.jpg",
    "productName": "Long Sleeve Skivvy Top",
    "size": ["XS", "S", "M"]
  },
  {
    "index": 6,
    "isSale": true,
    "isExclusive": false,
    "price": "Rs.2000",
    "productImage": "product-7.jpg",
    "productName": "Puffer Vest with Hood",
    "size": ["M", "L", "XL"]
  },
  {
    "index": 7,
    "isSale": false,
    "isExclusive": true,
    "price": "Rs.1699",
    "productImage": "product-8.jpg",
    "productName": "Funnel Neck Swing Top",
   "size": ["XS", "S", "XL"]
  }];

  export default products;

```

Now in displaycomponent I am mapping each product and displaying it.

displaycomponent.js:

```
import React, { Component } from 'react';
import products from './products';

class App extends Component {

    constructor(){
        super();
        this.state = {
            sortDirection: 'descending',
            data: this.state.data.sort(descending)
        };
    }

    sortData() {
        if(this.state.sortDirection ==='descending') {
            this.setState({ 
                sortDirection: 'ascending',
                data: this.props.payYears.sort(sortAscending)
            });
        } else {
            this.setState({ 
                sortDirection: 'descending',
                data: this.props.payYears.sort(sortDescending)
            });
        }
    }

  render() {
    return (
      <div>
        <h1>This is display component</h1>

        <ul>
                {
                  products.map(product => {
                    return <li>{product.index} - {product.price}</li>;
                  })
                }
            </ul>

      </div>
    );
  }
}

export default App;

```

Screenshot below shows the initial order of prices which are displayed:

[![enter image description here](https://i.stack.imgur.com/e4G5w.png)](https://i.stack.imgur.com/e4G5w.png)