I create a table with all the value. Now I just need to only add one number which is the total of the entire co2/kg at the bottom of the co2/kg column but I am having trouble adding it in the table format. Is there anyway I can add it?

<table >
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Quantity</th>
                    <th>UOM</th>
                    <th>Density</th>
                    <th>CO2/kg</th>
                    <th>Carbon</th>
                    <th>Footprint</th>
                  </tr>
                </thead>
                <tbody>
                  {/* testing.map */}
                  {descrition.map((descrition) => (
                    <tr key={descrition.id}>
                      <td>{descrition.food}</td>
                      <td>{descrition.quantity}</td>
                      <td>{descrition.uom}</td>
                      <td>{descrition.density}</td>
                      <td>{descrition.carbon}</td>
                      <td>{carbonCategory(descrition.carbon)}</td>
                      <td>{carbonCategory(descrition.carbon)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>

Picture of table

CodePudding user response：

You could add empty cells up until you reach the desired column and then array.reduce the values you need. Just adds all the values together. Here's a https://codesandbox.io/s/awesome-wave-tjs89y?file=/src/App.js:1318-1417

{description.reduce((acc, item) => {return acc   item.carbon;}, 0)}