title: How to handle null values inside my sort by function?
body: <p>I have a React table that has sortable headers by desc and asc values.
  It parses string values to numbers for sorting. However, my <code>numeric(x)</code> function fails to deliver when it meets a <code>null</code> value in my dataset.</p>
  <p>Here is the error: <code>TypeError: Cannot read property 'slice' of null </code></p>
  <p>Below is my function, and I also added code on how I implement <code>numeric</code> to my <code>Comparator()</code> for sorting</p>
  <pre><code>function numeric(x) {
      const val = parseFloat(x);
      if (isNaN(val)) {
        return parseFloat(x.slice(1));
      } else {
        return val;
      }
    }
  
  function descendingComparator(a, b, orderBy)
  {
      const numericA = numeric(a[orderBy]);
      const numericB = numeric(b[orderBy]);
      if (numericB &lt; numericA){
          return -1
      }
      if (numericB &gt; numericA){
          return 1
      }
      return 0
  }
  </code></pre>
  <p>How should I handle nulls in my numeric function? Realistically, they should be ignored and be placed at the bottom of the pecking order when sorting by asc and desc.</p>
  <p>EDIT:
  example data types for input x:</p>
  <ul>
  <li>10</li>
  <li>10%</li>
  <li>$10</li>
  <li>.1</li>
  <li>abc (string characters)</li>
  </ul>
  <p>If not careful, the Null values can act as a <code>0</code> when sorting data. It's important to note that Null simply means no data available, they should not be given a numerical value.</p>
  <p>EDIT EDIT:
  Important information about my Comparator and sorting functions</p>
  <pre><code>function getComparator(order, orderBy)
  {
      return order === &quot;desc&quot; 
          ? (a, b) =&gt; descendingComparator(a, b, orderBy)
          : (a, b) =&gt; -descendingComparator(a, b, orderBy)
  }
  
  const sortedRowInformation = (rowArray, comparator) =&gt;
  {
      const stabilizedRowArray = rowArray.map((el, index) =&gt; [el, index])
      stabilizedRowArray.sort((a, b) =&gt;
      {
          const order = comparator(a[0], b[0])
          if (order !== 0) return order
          return a[1] - b[1]
      })
      return stabilizedRowArray.map((el) =&gt; el[0])
  }
  </code></pre>
  <p>An example of my table that uses all of these functions pieced together:</p>
  <pre><code>export default function TableContent(props)
  {
      const [orderDirection, setOrderDirection] = useState('asc');
      const [valueToOrderBy, setValueToOrderBy] = useState('symbol');
  
      const { data } = props;
      
      const handleRequestSort = (event, property) =&gt;
      {
          const isAscending = (valueToOrderBy === property &amp;&amp; orderDirection === 'asc') 
          setValueToOrderBy(property)
          setOrderDirection(isAscending ? 'desc' : 'asc')
      }
  
      return (
          &lt;&gt;
              &lt;TableContainer&gt;
                  &lt;Table&gt;
                      &lt;AdvancedStatsHeaders
                          data={data}
                          valueToOrderBy={valueToOrderBy}
                          orderDirection={orderDirection}
                          handleRequestSort={handleRequestSort}
                      /&gt;
                      &lt;TableBody&gt;
                      {
                          sortedRowInformation(data, getComparator(orderDirection, valueToOrderBy))
                              .map((stock, index) =&gt; (
                              &lt;TableRow key = {index} &gt;
                                  &lt;TableCell&gt;
                                      {stock.symbol}
                                  &lt;/TableCell&gt;
                                  &lt;TableCell&gt;
                                      {stock.enterprisevalue}
                                  &lt;/TableCell&gt;
                                  &lt;TableCell&gt;
                                      {stock.enterprise_value_revenue}
                                  &lt;/TableCell&gt;
                                  &lt;TableCell&gt;
                                      {stock.revenuepershare}
                                  &lt;/TableCell&gt;
                                  &lt;TableCell&gt;
                                      {stock.debt_to_equity}
                                  &lt;/TableCell&gt;
                                  &lt;TableCell&gt;
                                      {stock.ebitda}
                                  &lt;/TableCell&gt;
                                  &lt;TableCell&gt;
                                      {stock.profitmargin}
                                  &lt;/TableCell&gt;
                                  &lt;TableCell&gt;
                                      {stock.price_to_sales}
                                  &lt;/TableCell&gt;
                                  &lt;TableCell&gt;
                                      {stock.price_to_book}
                                  &lt;/TableCell&gt;
                                  &lt;TableCell&gt;
                                      {stock.put_call_ratio}
                                  &lt;/TableCell&gt;
                              &lt;/TableRow&gt;
                          ))
                      }
                      &lt;/TableBody&gt;
                  &lt;/Table&gt;
              &lt;/TableContainer&gt;
          &lt;/&gt;
      );
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/5NDms.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5NDms.png" alt="enter image description here" /></a></p>