React：グループ化された行のマップとレンダリング

Question

次のデータをグループ化した一連のテーブルにマップしてレンダリングしようとしていますが、苦労しています。誰もが...正しい方向に私がマップすることができたと、標準的なデータセットをレンダリングしている

*Group 1* 
    - Item 1 
    - Item 2 

    *Group 2* 
    - Item 1 
    - Item 2 

データ

[{ 
    group: "twitter", 
    records : [ 
    {_id: "aMzJECeyvoLGdNzRM", 
    owner: "K7xTxu7PRDCuhFZRC", 
    company_ID: "1", 
    coreURL: "http://test88.com", 
    feedback: "Charles" 
    },{ 
    _id: "aMzJECeyvoLGdNzRM", 
    owner: "K7xTxu7PRDCuhFZRC", 
    company_ID: "1", 
    coreURL: "http://test99.com", 
    feedback: "Gerry" 
    } 
    ]},{ 
    group: "linkedin", 
    records : [ 
    {_id: "aMzJECeyvoLGdNzRM", 
    owner: "K7xTxu7PRDCuhFZRC", 
    company_ID: "1", 
    coreURL: "http://test88.com", 
    feedback: "Charles" 
    },{ 
    _id: "aMzJECeyvoLGdNzRM", 
    owner: "K7xTxu7PRDCuhFZRC", 
    company_ID: "1", 
    coreURL: "http://test99.com", 
    feedback: "Gerry" 
    } 
    ]}] 

私が達成しようとしていますが...私を指すことができますグループ化された要素に苦労している

Answer 1

のようなメソッドのこの種を実装するいくつかのライブラリがあります。 RecordListDetailコンポーネント：

groupedTables(){ 
return groupedData.map ((group, index) => { 
    return (
    <div key={index}> 
    <div> 
     {group.group} 
    </div> 
    <Table striped bordered condensed hover> 
     <tbody> 
     {group.records.map ((details, index) => 
     <RecordListDetail 
      key={index} 
      details={details} 
     /> 
     )} 
     </tbody> 
    </Table> 
    </div> 

Answer 2

groupByユーティリティを作成し、おそらくそれをArrayプロトタイプにリンクするには、reduce functionを使用できます。

Array.prototype.groupBy = function(key) { 
 
    return this.reduce(function(groups, item) { 
 
    const val = item[key]; 
 
    groups[val] = groups[val] || []; 
 
    groups[val].push(item); 
 
    return groups; 
 
    }, {}); 
 
}; 
 

 
const data = [{ 
 
    group: "twitter", 
 
    records: [{ 
 
    _id: "aMzJECeyvoLGdNzRM", 
 
    owner: "K7xTxu7PRDCuhFZRC", 
 
    company_ID: "1", 
 
    coreURL: "http://test88.com", 
 
    feedback: "Charles" 
 
    }, { 
 
    _id: "aMzJECeyvoLGdNzRM", 
 
    owner: "K7xTxu7PRDCuhFZRC", 
 
    company_ID: "1", 
 
    coreURL: "http://test99.com", 
 
    feedback: "Gerry" 
 
    }] 
 
}, { 
 
    group: "linkedin", 
 
    records: [{ 
 
    _id: "aMzJECeyvoLGdNzRM", 
 
    owner: "K7xTxu7PRDCuhFZRC", 
 
    company_ID: "1", 
 
    coreURL: "http://test88.com", 
 
    feedback: "Charles" 
 
    }, { 
 
    _id: "aMzJECeyvoLGdNzRM", 
 
    owner: "K7xTxu7PRDCuhFZRC", 
 
    company_ID: "1", 
 
    coreURL: "http://test99.com", 
 
    feedback: "Gerry" 
 
    }] 
 
}] 
 

 
const groupedData = data.groupBy('group'); 
 
console.log(groupedData);

私は次のようにこれを並べ替えるとでグループ化されたテーブルの各行をレンダリングするために管理し、既にlodashとunderscore