title: React JS sort by ascending and descending
body: <p>I've been using <code>sortBy</code> from <code>lodash</code>, but keep getting </p>
  
  <pre><code>./src/components/Product.js
  Syntax error: Unexpected token (17:29)
  
    15 |       sortByPrice() {
    16 |         this.setState(prevState =&gt; ({
  &gt; 17 |           sortBy(prevState, ['price'])
       |                              ^
    18 |         }));
    19 |       }
    20 |
  </code></pre>
  
  <p>This is my component, in which I want to sort the array of objects based on their price. <code>this.state</code> inside <code>return()</code> gives me an array, so that seems to be working, I just need to get the <code>sortByPrice()</code> working </p>
  
  <pre><code>import React, { Component } from 'react'
  import sortBy from 'lodash/sortBy'
  import './Product.css'
  import products from '../offers.json'
  
  
  class Product extends Component {
  
    constructor(props) {
      super(props)
      this.state = { products }
      this.sortByPrice = this.sortByPrice.bind(this);
    }
  
    sortByPrice() {
      this.setState(prevState =&gt; ({
        sortBy(prevState, ['price'])
      }));
    }
  
    render() {
      return (
        &lt;div className="Product"&gt;
        &lt;a href="#" onClick={this.sortByPrice}&gt;
        Click me
        &lt;/a&gt;
        &lt;br /&gt;
        { products.map((product, index) =&gt;
          &lt;div key ={index} className="card"&gt;
          &lt;img src={ product.product.details.image } alt={ product.product.details.ean }/&gt;
          &lt;h3&gt;Prijs: { product.price } Euro&lt;/h3&gt;
          &lt;p&gt;Staat: { product.description }&lt;/p&gt;
          &lt;p&gt;Verkoper: { product.user.details.firstname }&lt;/p&gt;
          &lt;/div&gt;
        )}
        &lt;/div&gt;
      )
    }
  }
  export default Product
  </code></pre>
  
  <p><strong>UPDATE</strong> </p>
  
  <p>Turns out I was trying to call <code>sortBy()</code> on and object, which resulted in the error. Implemented this and the errors went away, now I just need to figure out a way to manage my state and re-render the view </p>
  
  <pre><code>this.setState(prevState =&gt; {
      { products: sortBy(prevState.products, ['price']) }
  });
  </code></pre>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>After talking to some friends I was advised to ditch <code>lodash</code> for this altogether. I just wrote the functions myself, added my binds to the constructor and called my functions in the <code>onClick</code> of my ASC and DESC buttons.</p>
  
  <pre><code>import React, { Component } from 'react'
  import './Product.css'
  import products from '../offers.json'
  
  class Product extends Component {
  
    constructor(props) {
      super(props)
      this.state = { products }
      this.sortByPriceAsc = this.sortByPriceAsc.bind(this);
      this.sortByPriceDesc = this.sortByPriceDesc.bind(this);
    }
  
    sortByPriceAsc() {
      this.setState(prevState =&gt; {
        this.state.products.sort((a, b) =&gt; (a.price - b.price))
    });
    }
  
    sortByPriceDesc() {
      this.setState(prevState =&gt; {
        this.state.products.sort((a, b) =&gt; (b.price - a.price))
    });
    }
  
    render() {
      return (
        &lt;div&gt;
        Sorteren:
          &lt;button onClick={this.sortByPriceAsc}&gt;
            ASC
          &lt;/button&gt;
          &lt;button onClick={this.sortByPriceDesc}&gt;
            DESC
          &lt;/button&gt;
        &lt;div className="product"&gt;
        { this.state.products.map((product, index) =&gt;
          &lt;div key ={index} className="card"&gt;
            &lt;img src={ product.product.details.image } alt={ product.product.details.ean }/&gt;
            &lt;h3&gt;Prijs: { product.price } Euro&lt;/h3&gt;
            &lt;p&gt;Staat: { product.description }&lt;/p&gt;
            &lt;p&gt;Verkoper: { product.user.details.firstname }&lt;/p&gt;
          &lt;/div&gt;
        )}
        &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  export default Product
  </code></pre>