Реагировать на загрузочную таблицу js Сортировка по Asc или Dsc

Question

Я хочу отсортировать данные в таблице реагирования js по порядку asc и dsc.

Цель: щелкнув заголовок столбца, я хочу отсортировать данные в таблице ReactJS по возрастанию и убыванию.

Проблема: моя функция не сортирует записи по возрастанию или убыванию. Кроме того, не вижу никаких ошибок на консоли. Может кто-нибудь помочь мне отладить.

class Ddetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      walk: [],
      data: {
        columnName: "",
        sortOrder: "",
        searchText: ""
      }
    };
    this.sortChanged = this.sortChanged.bind(this);
    this._sortClass = this._sortClass.bind(this);
  }
  sortChanged(e: any, order: string) {
    const Data = this.state.data;
    Data.sortOrder = order.toString().toLowerCase() === "asc" ? "desc" : "asc";
    Data.columnName = e.currentTarget.innerText;
    this.setState({ data: Data });
  }
  _sortClass(filterName: string) {
    return (
      "fa fa-fw " +
      (filterName === this.state.data.columnName
        ? "fa-sort-" + this.state.data.sortOrder
        : "fa-sort")
    );
  }


  render() {
    return (
        <table
            // id="example"
            class="table table-hover"
            style={{ width: "100%" }}
          >
            <thead style={{ position: "relative" }}>
              <tr className="th">
                <th
                  onClick={e => {
                    this.sortChanged(e, this.state.data.sortOrder);
                  }}
                >
                  Id
                  <i className={this._sortClass("Id")} />
                </th>
                <th>Date</th>
                <th>Plate Number</th>
                <th
                  style={{ width: "100px" }}
                  onClick={e => {
                    this.sortChanged(e, this.state.data.sortOrder);
                  }}
                >
                  Mileage[Km]
                  <i className={this._sortClass("Mileage[Km]")} />
                </th>
                <th className="t">Fuel Consumed[L]</th>
                <th className="t">
                  Average Fuel <br></br> Consumed[L/100km]
                </th>
                <th className="t">
                  Overspeeding <br></br> Distance[%]
                </th>
                <th className="t">
                  <span
                    id="dropdownMenuLink"
                    role="button"
                    className="dropdown-toggle"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                    //
                  >
                    Overall <br></br> Score
                  </span>
                  <div
                    class="dropdown-menu nott "
                    aria-labelledby="dropdownMenuLink"
                    style={{ position: "relative", zIndex: "9999999" }}
                  >
                    <a class="dropdown-item" href="# ">
                      Action
                    </a>
                    <a class="dropdown-item" href="/dashboard ">
                      dashboard
                    </a>
                    <a class="dropdown-item" href="# ">
                      Something else here
                    </a>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>SArchitect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>41</td>

                <td>$320,800</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>31</td>

                <td>$320,800</td>
              </tr>

            </tbody>
                          </table>

    );
  }
}