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; 

Answer 1

ここに私のコメントに基づいて、それを行う方法の簡単な例を示します。

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

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

    onSort(event, sortKey){ 
    /* 
    assuming your data is something like 
    [ 
     {accountname:'foo', negotiatedcontractvalue:'bar'}, 
     {accountname:'monkey', negotiatedcontractvalue:'spank'}, 
     {accountname:'chicken', negotiatedcontractvalue:'dance'}, 
    ] 
    */ 
    const data = this.state.data; 
    data.sort((a,b) => a[sortKey].localeCompare(b[sortKey])) 
    this.setState({data}) 
    } 

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

    return (
     <table className="m-table"> 
     <thead> 
      <tr> 
      <th onClick={e => this.onSort(e, 'accountname')}>AccountName</th> 
      <th onClick={e => this.onSort(e, 'negotiatedcontractvalue')}>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; 

私はあなたが反応し、ブートストラップ・table`をそれがすることによりソートを含むすべての機能を提供し `使用することをお勧めします