How to display duplicate array values only once in React.js

Question

I have a Bill To Print but in Bill I have 'Products' array object in which I want, I have 3 products array then product name, price, discount, etc. are same then it should show only one array (line) but in 'Products' array I have a 'SrNo.' column which means each product has unique serial number so it should product name, price, discount, etc. show in one line and 'SrNo.' column shows 3 rows. Currently I'm using map() to display array values but it showing like this

Products arrays

My Bill_Preview.js (Frontend)

      <tr>
        <td style={{width:"1%"}}>Sr<br></br>No.</td>
        <td >Description Of Goods</td>
        <td >Qty</td>
        <td >Rate</td>
        <td >Disc %</td>
        <td >Amount</td>
        </tr>
        
        {/* Data row */}
  {DataForPreview &&
  DataForPreview.map((data, Id) => (

     // This Row all data i want only once if its same product except 'Prod_SrNo'

        <tr>
        <td >{Id + 1}.</td>
        <td >
          {data.Product_Comp} {data.Product}
          <br></br>
          {data.Prod_SrNo}
          <br></br>
        </td>
        <td >1</td>
        <td >{data.Price}</td>
        <td >{data.Discount}</td>
        <td >{(data.Price - (data.Price * data.Discount) / 100).toFixed(2) }</td>
        
       
        </tr>
    ))}

Answer 1

you can filter the duplicate values from the array before mapping:

 [...new Set(DataForPreview)].map((data, Id) => ( <tr> <td >{Id + 1}.</td> <td > {data.Product_Comp} {data.Product} <br></br> {data.Prod_SrNo} <br></br> </td> <td >1</td> <td >{data.Price}</td> <td >{data.Discount}</td> <td >{(data.Price - (data.Price * data.Discount) /100).toFixed(2)}</td> </tr> ))}

but you have to calc the total values of the duplicates, for example

calc the total amount

 function calcTotalAmount(data){ const amount = (data.Price - (data.Price * data.Discount) /100).toFixed(2); const quantity = DataForPreview.filter(item=> item.Prod_SrNo === data.Prod_SrNo).length; return amount * quantity; } <td>{calcTotalAmount(data)}</td>

I think there is a simpler way to do it, but get the fundamental