I need to display a Total column in my view as shown below. I have used the map function to show the values and this is how my code looks so far. Now I need to display a total column by adding the values. What is the best way to achieve that?.
<div className="shiftmbLower">
<div></div>
<div className="shiftmb_header">Frz</div>
<div className="shiftmb_header">Clr</div>
<div className="shiftmb_header">Dry</div>
<div className=" forksHeader">Forks</div>
<div className="subheader_mb_shift"><div>Active FL</div>
<div>Pallets/Hr</div>
<div>Pallets Done</div>
<div>Pallets Left</div>
<div>Hours Remaing</div>
</div>
{
props.sdata.sfDetails && props.sdata.sfDetails
.map(data => {
const dmdData = props.sdata.shiftDDDDDDetails.find(dmdRow => dmdRow.area == data.area);
return data.area === 'Total' ? null : <div className="subheader_mb_shift">
<div>{data.put_active}</div>
<div>{(props.day) ? isNaN(parseFloat(data.put_pal).toFixed(1)) ? 0 : parseFloat(data.put_pal).toFixed(1) :
isNaN(parseFloat(dmdData.pal_hr).toFixed(1)) ? 0 : parseFloat(dmdData.pal_hr).toFixed(1)}</div>
<div>{props.day ? data.put_done || 0 : data.dmd_done}</div>
<div>{props.day ? data.put_left || 0 : data.dmd_left}</div>
<div>{props.day ? isNaN(parseFloat(data.put_hour).toFixed(1)) ? 0 : parseFloat(data.dmd_hour).toFixed(1) : ''}</div>
</div>
})
}
</div>
