如何使用ReactJS以两种方式使表中的列可排序

Question

我正在用ReactJS构建一个简单的应用程序，它通过调用某个API来使用JSON数组。然后，我将数组的结果填充到一个表中。现在，我想使表中的列可排序。我理想情况下想要的是升序和降序排序。一旦我在标题上单击了升序排序，它就应该按降序排序，反之亦然。这是我的代码。

class ParentComponent extends Component {
constructor(props) {
 super(props);
 this.state = { data: [] };
}

componentDidMount() {
  fetch("http://hostname:xxxx/yyyy/zzzz")
  .then(function(response) {
    return response.json();
  })
  .then(items => this.setState({ data: items }));
 }

render() {
var newdata = this.state.data;

return (
  <table className="m-table">
    <thead>
      <tr>
        <th>AccountName</th>
        <th>ContractValue</th>
      </tr>
    </thead>
    <tbody>
      {newdata.map(function(account, index) {
        return (
          <tr key={index} data-item={account}>
            <td data-title="Account">{account.accountname}</td>
            <td data-title="Value">{account.negotiatedcontractvalue}</td>
          </tr>
        );
      })}
    </tbody>
  </table>
  );
 }
}

export default ParentComponent;