Here’s some sample code to help.

getDataRow is a helper function that takes 3 arguments:

1. Your data (props.types[2])
2. The pension type (“DefinedBenefitPension” or “DefinedContributionPension”)
3. The metric (like “Participants”)

You can use the resulting object to map to table cells according to year.

https://repl.it/repls/UprightAdmiredBlogclient

// DataExtract.uniqueYearsPension(props.types[2])
const years = [2016, 2017, 2018]

function getDataRow(data, type, key) {
    const rowData = {}

    data.filter(pension => pension.Type == type).forEach(pension => {
      rowData[pension.Year] = pension.Participants
    })

    return rowData
}

// { '2016': 9, '2017': 7, '2018': 0 }
const participants = getDataRow(data, 'DefinedBenefitPension', 'Participants')

// <td key=2016>9</td>
// <td key=2017>7</td>
// <td key=2018>0</td>
const row = years.map(year => {
  return <td key={year}>
    {participants[year]}
  </td>
})

I am out of ideas how to populate dynamically my table. This table is result of endpoint response:

 {props.types[2].length > 0 ? (
            <div className="onepager-bottomtables-table ">
              <h1 className="onepager-bottomtables-h1">UNIQUE Types</h1>
              <table className="table table-striped table-bordered table-sm table-hover">
                <thead className="thead-dark">
                  <tr>
                    <th>Type</th>
                    <th>Plan Name</th>
                    <th>More</th>
                    <th>Statistics</th>
                  </tr>
                </thead>
                <tbody className="table-hover">
                  {DataExtract.uniquePensionTypes(props.types[2]).map(
                    (element, index) => (
                      <tr key={index}>
                        <td className="align-middle" id="types-type">
                          {element}
                        </td>
                        <td className="align-middle">{element}</td>
                        <td className="align-middle">More</td>
                        <td>
                   //***THIS IS THE PROBLEM PART OF THE CODE********
                          <table className="onepager-small-table">
                            <thead>
                              <tr>
                                <th></th>
                                {DataExtract.uniqueYearsPension(props.types[2]).map(
                                  (element, index) => (
                                    <th key={index}>{element}</th>
                                  )
                                )}
                              </tr>
                            </thead>
                            <tbody>
                              {console.log(
                                DataExtract.participantsPension(props.types[2])
                              )}
                              <tr>
                                <th>Participants</th>
                              </tr>

                              <tr>
                                <th>Total Asset</th>
                              </tr>
                              <tr>
                                <th>Net Asset</th>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    )
                  )}
                </tbody>
              </table>
            </div>
          ) : (
            ""
          )}

I am pasting all the code to get the picture. The data I get (props.types[2]) looks like this for example:

"SumPensionTypes": [
        {
            "Type": "DefinedBenefitPension",
            "Description": null,
            "Year": 2016,
            "Participants": 9.0,
            "TotalAssets": 6668305.0,
            "NetAssets": 6668305.0,
            "PlanName": null
        },
        {
            "Type": "DefinedContributionPension",
            "Description": null,
            "Year": 2016,
            "Participants": 72.0,
            "TotalAssets": 17230395.0,
            "NetAssets": 17230395.0,
            "PlanName": null
        },
        {
            "Type": "DefinedBenefitPension",
            "Description": null,
            "Year": 2017,
            "Participants": 7.0,
            "TotalAssets": 2096999.0,
            "NetAssets": 2096999.0,
            "PlanName": null
        },
        {
            "Type": "DefinedContributionPension",
            "Description": null,
            "Year": 2017,
            "Participants": 56.0,
            "TotalAssets": 16114639.0,
            "NetAssets": 16114639.0,
            "PlanName": null
        },
        {
            "Type": "DefinedBenefitPension",
            "Description": null,
            "Year": 2018,
            "Participants": 0.0,
            "TotalAssets": 0.0,
            "NetAssets": 0.0,
            "PlanName": null
        },
        {
            "Type": "DefinedContributionPension",
            "Description": null,
            "Year": 2018,
            "Participants": 49.0,
            "TotalAssets": 21954205.0,
            "NetAssets": 21954205.0,
            "PlanName": null
        }
    ]

So currently all looks like this picture:

Now it comes the hard part (for me). I am trying to fill the small tables with the summed data for the objects with same type. As you can see from data there are 2 types – DefinedBenefitPension and DefinedContributionPension which repeats for 2016,2017,2018. I combined them with this method and populate them in first column:

//***************DIFFERENT PENSION TYPES********************* */
const uniquePensionTypes = data => {
  const unique = [...new Set(data.map(plan => plan.Type))];
  return unique;
};

The problem is that I want to populate small table as per plan type. If you see the picture and data you will understand how it is suppose to be populated as they have same types but statistics are year-for-year.