How can pull values from a Json in React?

I'm trying to dosomething similar to this Angular Code but using React. I'm very new to react and can't figure it out.

I have a json that is storing data fields and a field called classes. I want to be able to pull the classes in json fields to attach them to each row. This is the angular way I have done in the past successfully.

<tr ng-repeat="row in vm.widget10.table.rows">
     <td ng-repeat="cell in row">
          <span class="{{cell.classes}}">
               {{cell.value}}
          </span>
     </td>
</tr>

with a json structured this way

{
   "widget10": {
    "title": "Table Details",
    "table": {
        "columns": [{
                "title": "Item Name"
            },
            {
                "title": "Some Data"
            },
            {
                "title": "Other Data ($)"
            },
            {
                "title": "Visual Data (%)"
            },
            {
                "title": "Profit/Loss ($)"
            },
            {
                "title": "Profit/Loss (%)"
            }
        ],
        "rows": [
            [{
                    "value": "Data Field One",
                    "classes": "text-boxed m-0 deep-orange-bg white-fg",
                    "icon": ""
                },
                {
                    "value": "$14,880.00",
                    "classes": "text-bold",
                    "icon": ""
                },
                {
                    "value": "$14,000.00",
                    "classes": "",
                    "icon": ""
                },
                {
                    "value": "%94.08",
                    "classes": "red-fg",
                    "icon": "trending_down"
                },
                {
                    "value": "$880.00",
                    "classes": "",
                    "icon": ""
                },
                {
                    "value": "%5.92",
                    "classes": "",
                    "icon": ""
                }
            ]
        ]
    }
}

In my react component render() I have something like this:

<TableBody
    displayRowCheckbox={this.state.showCheckboxes}
    deselectOnClickaway={this.state.deselectOnClickaway}
    showRowHover={this.state.showRowHover}>
        {statsData.map( (row, index) => (
            <TableRow key={index}>
                <TableRowColumn><span style={{backgroundColor:"{statsData.bgColor[index]}"}}>{row.name}</span></TableRowColumn>
                <TableRowColumn>{row.data}</TableRowColumn>
                <TableRowColumn>{row.o_data}</TableRowColumn>
                <TableRowColumn>{row.v_data}</TableRowColumn>
                <TableRowColumn>{row.o_pl}</TableRowColumn>
                <TableRowColumn>{row.v_pl}</TableRowColumn>
            </TableRow>
        ))}
</TableBody>

and a json this way (in the component)

const statsData =  [
    {
        name: "Data Field One",
        bgColor: "red",
        data: "$14,880.00",
        o_data: "$14,000.00",
        v_data: "%94.08",
        o_pl: "$880.00",
        v_pl: "%5.92",
    },
    {
        name: "Data Field Two",
        bgColor: "blue",
        data: "$14,880.00",
        o_data: "$14,000.00",
        v_data: "%94.08",
        o_pl: "$880.00",
        v_pl: "%5.92",
    },
    {
        name: "Data Field Three",
        bgColor: "yellow",
        data: "$14,880.00",
        o_data: "$14,000.00",
        v_data: "%94.08",
        o_pl: "$880.00",
        v_pl: "%5.92",
    }
];

So far the data comes through fine, but I can't figure out how to pull the bgColor as either a backgroundColor style or as a class.

Any help is appreciated.

Thanks