title: How to solve the type error while sorting in react with typescript?
body: <p>I Am trying to sort a table with the list which is retrieving through API. I am doing this in react + typescript. I am facing the type error. Kindly, help me. Below is my code. 
  So by hovering on Name , Type , Color  this should sort  but sorting is not working. kindly go through the code and help me do sorting .</p>
  
  <pre><code>
  
  export interface VehicleListProps {
      vehicle: VehicleState;
  
      listVehicles: (limit: number, skip: number) =&gt; void;
      addVehicle: (id: string) =&gt; void;
      deleteVehicle: (id: string, limit: number, skip: number) =&gt; void;
  }
  
  const Row = ({name, type , color }) =&gt; (
    &lt;div className="row"&gt;
      &lt;div&gt;{name}&lt;/div&gt;
      &lt;div&gt;{type}&lt;/div&gt;
      &lt;div&gt;{color}&lt;/div&gt;
  
    &lt;/div&gt;
  );
  
  const VehicleList: React.FC&lt;VehicleListProps&gt; = (props) =&gt; {
  
      constructor(props); {
        this.state = {
          data: vehicle
  
  };
  
  
       this.compareBy = compareBy.bind(this);
       this.sortBy = sortBy.bind(this);
      }
  
      function compareBy(key) {
        return function (a, b) {
          if (a[key] &lt; b[key]) return -1;
          if (a[key] &gt; b[key]) return 1;
          return 0;
        };
      }
  
    function  sortBy(key) {
        let vehicle = [...this.state.data];
        vehicle.sort(this.compareBy(key));
        this.setState({data: vehicle});
      }
  
      const rows = this.state.data.map( (rowData) =&gt; &lt;Row {...rowData} /&gt;);
  
      return (
  
          &lt;div&gt;  
  
            &lt;div className="row gap-20 masonry pos-r"&gt;
                &lt;Table id="dataTable" className="table table-hover table-striped"&gt;
                    &lt;thead className="thead-dark" &gt;
                        &lt;tr&gt;
                            &lt;th onClick={() =&gt; this.sortBy('name')}&gt;Name&lt;/th&gt;
                            &lt;th onClick={() =&gt; this.sortBy('type')}&gt;Type&lt;/th&gt;                     
                            &lt;th onClick={() =&gt; this.sortBy('color')}&gt;Color&lt;/th&gt;         
                            &lt;th&gt;&lt;/th&gt;
                        &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;{
                        vehicle.page.collection.map((vehicle, idx) =&gt; {
                            return (
                                &lt;tr key={idx}&gt;
                                    &lt;td&gt;&lt;a className="vehicleName" href={`/vehicles/${vehicle.id}`}&gt;{vehicle.name}&lt;/a&gt;&lt;/td&gt;
                                    &lt;td&gt;{vehicle.type}&lt;/td&gt;
  
                                    &lt;td&gt;{vehicle.color}&lt;/td&gt;
  
                                &lt;/tr&gt;
                            )
                        })
                    }&lt;/tbody&gt;
  
                &lt;/Table&gt;
  
  
                &lt;/div&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>