title: Sorting React table by clicking table headers for columns with numerical and string values
body: <p>I am having problems in sorting my React table by clicking on columns headers for column with string values, but with the column with numerical values it's all ok. I think that I am doing wrong in sortBySymbolHandler method. I suppose that my check for strings: this.state.directionSymbol[key] === 'asc'? a[key] - b[key] : b[key] - a[key] is wrong. </p>
  
  <pre><code>    import React, { Component } from 'react';
      import CoinTable from '../components/CoinTable/CoinTable';
      import data from '../components/Data/Data.json';
  
      class App extends Component {
          constructor(props) {
              super(props)
              this.state = {
                  data: data,
                  direction: {
                      price_usd: 'asc'
                  },
                  directionSymbol: {
                      symbol: 'asc'
                  }
              }
          }
  
          sortBySymbolHandler = (key) =&gt; {
               this.setState({
                  data: data.sort((a, b) =&gt; (
                      this.state.directionSymbol[key] === 'asc'
                      ? a[key] - b[key]
                      : b[key] - a[key]
                  )),
  
                  directionSymbol: {
                      [key]: this.state.directionSymbol[key] === 'asc'
                      ? 'desc'
                      : 'asc'
                  }
              })
          }
  
          sortByPriceHandler = (key) =&gt; {
              this.setState({
                  data: data.sort((a, b) =&gt; (
                      this.state.direction[key] === 'asc'
                      ? 
                       parseFloat(a[key]) - parseFloat(b[key])
                      : parseFloat(b[key]) - parseFloat(a[key])
                  )),
  
                  direction: {
                      [key]: this.state.direction[key] === 'asc'
                      ? 'desc'
                      : 'asc'
                  }
              })
          }
  
          render() {
              return (
                  &lt;div className="App"&gt;
                      &lt;div className="container-fluid"&gt;
                          &lt;div className="container"&gt;
                              &lt;CoinTable 
                                  data={this.state.data} 
                                  sortBySymbol={this.sortBySymbolHandler}
                                  sortByPrice={this.sortByPriceHandler}
                              /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              );
          }
      }
  
      export default App;
  </code></pre>
  
  <p>Data.json is in this format: </p>
  
  <pre><code>    [
          {
              "id": "bitcoin", 
              "name": "Bitcoin", 
              "symbol": "BTC", 
              "rank": "1", 
              "price_usd": "10406.5", 
              "price_btc": "1.0", 
              "24h_volume_usd": "9766700000.0", 
              "market_cap_usd": "175053324790", 
              "available_supply": "16821537.0", 
              "total_supply": "16821537.0", 
              "max_supply": "21000000.0", 
              "percent_change_1h": "-0.04", 
              "percent_change_24h": "-3.39", 
              "percent_change_7d": "-12.62", 
              "last_updated": "1516718960"
          }, 
          {
              "id": "ethereum", 
              "name": "Ethereum", 
              "symbol": "ETH", 
              "rank": "2", 
              "price_usd": "947.841", 
              "price_btc": "0.0917641", 
              "24h_volume_usd": "3615420000.0", 
              "market_cap_usd": "92093645501.0", 
              "available_supply": "97161492.0", 
              "total_supply": "97161492.0", 
              "max_supply": null, 
              "percent_change_1h": "0.3", 
              "percent_change_24h": "-4.04", 
              "percent_change_7d": "-13.22", 
              "last_updated": "1516718952"
          }, 
          {
              "id": "ripple", 
              "name": "Ripple", 
              "symbol": "XRP", 
              "rank": "3", 
              "price_usd": "1.27202", 
              "price_btc": "0.00012315", 
              "24h_volume_usd": "2597960000.0", 
              "market_cap_usd": "49276964438.0", 
              "available_supply": "38739142811.0", 
              "total_supply": "99993093880.0", 
              "max_supply": "100000000000", 
              "percent_change_1h": "0.83", 
              "percent_change_24h": "3.49", 
              "percent_change_7d": "-5.9", 
              "last_updated": "1516718941"
          } 
  ]
  </code></pre>
  
  <p>and CoinTable.js is like this:</p>
  
  <pre><code>import React from 'react';;
  import TableRow from './TableRow/TableRow';
  
  const coinTable = (props) =&gt; (
      &lt;table&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;#&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;&lt;button onClick={() =&gt; props.sortBySymbol('symbol')}&gt;Symbol&lt;/button&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;button onClick={() =&gt; props.sortByPrice('price_usd')}&gt;Price&lt;/button&gt;&lt;/th&gt;
                  &lt;th&gt;%/hour&lt;/th&gt;
                  &lt;th&gt;%/day&lt;/th&gt;
                  &lt;th&gt;%/week&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              {
                  props.data.map(row =&gt; {
                      const price = row.price_usd;
                      const formattedPrice = parseFloat(price).toFixed(2);
                      return (
                          &lt;TableRow key={row.rank} row={row} formattedPrice={formattedPrice} /&gt;
                      )
                  })
              }
          &lt;/tbody&gt;
      &lt;/table&gt;
  );
  
  export default coinTable;
  </code></pre>
  
  <p>Can somebody help?</p>