How to sort data in ascending or descending order in Reactjs?

Question

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:

Answer 1

Something like this should be what you're looking for.

import React, { Component } from 'react';
import { render } from 'react-dom';
import products from './products';

class App extends Component {

  state = {
    products,
    prices: [],
  }

  componentDidMount() {
    const { products, prices} = this.state;

    prices = products.map(p => p.price.substr(3));
    this.setState({ prices })
  }

  sortAscending = () => {
    const { prices } = this.state;
    prices.sort((a, b) => a - b)    
    this.setState({ prices })
  }

  sortDescending = () => {
    const { prices } = this.state;
    prices.sort((a, b) => a - b).reverse()
    this.setState({ prices })
  }

  render() {
    const { prices } = this.state;
    return (
      <div>
        <ul>
          {
            prices.map((p, i) => {
              return <li>{i} - Rs.{p}</li>;
            })
          }
        </ul>
        <button onClick={this.sortAscending}>asc</button>
        <button onClick={this.sortDescending}>desc</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));