javascript - Merge 2 table data and add/combine two integer fields

Question

I have a table of data that shows particular product and the amount purchased throughout the day. They were inserted as different objects and I want to add the number of items purchased of each product.

My table look like this

Apple 10 01/20/2021 18:30
Apple 5  01/29/2021 04:30
Apple 20 01/29/2021 07:30

But I want them to be combined into like

Apple 35

So far this is how I set the table

<Table striped="true" size="sm" style={{width: "20%"}}>
 <tbody>
  {this.state.products?.map((product, index) => (
   <tr key={`entity-${index}`}>
     <td>{product.type}</td>
     <td>{product.amount}</td>                        
   </tr>
  ))}
 </tbody>
</Table>

How can I combine those data based on their type?

Answer 1

Below are the steps that I took to solve the problem mentioned above. I have left the usage of state to you to implement it as per your requirement.

1. First I created an array of fruits and their corresponding quantity purchased
2. Created a Set to get unique fruits
3. In the JSX, I have looped over the Set and then calculated the total quantity of those fruits by filtering the fruit name first and then adding the quantity together using reduce
4. These values were finally displayed in the table

class Fruits extends Component {
  render() {
    const purchasedItems = [
      { fruit: "apple", quantity: 5 },
      { fruit: "apple", quantity: 2 },
      { fruit: "apple", quantity: 10 },
      { fruit: "mango", quantity: 5 },
      { fruit: "mango", quantity: 8 },
    ];

    let uniqueFruit = [...new Set(purchasedItems.map((x) => x.fruit))];
    
    return (
      <div>
        <table>
          <tbody>
            {uniqueFruit.map((fruit_name) => {
              let total = purchasedItems
                .filter((item) => 
                  item.fruit === fruit_name
                )
                .reduce((acc, curr) => acc + curr.quantity, 0);
              return(
              <tr>
                <td>{fruit_name}</td>
                <td>{total}</td>
              </tr>)
            })}
          </tbody>
        </table>
      </div>
    );
  }
}