run reduce function before map - reactjs

Question

In our scenario , I map the array and produce the result using jsx , but I want the ignore duplicate data before the map operation. so how can I do that? here snipped code may help you :
import React, { useContext } from "react";
import { Context } from "../Context/Context";
import "./Navbar.css"
import cartImg from "../../cart.png"
import close from "../../close.svg"
export default function Navbar() {
const { cart, cartReducer } = useContext(Context)
function getCart(products) {
return products.map((product, index) =>
<div key={index} style={{ borderBottom: "1px solid #d5cfcf" }} >
<img src={product.image} style={{ width: '100%' }} alt="" />
<div className="cart-info">
<div>
<img src={close} onClick={() =>
cartReducer({ product, type: 'remove' })} style={{ width: 30, paddingLeft: 10 }} alt="" />
</div>
<div>
{product.name}
</div>
</div>
</div>
)
}
return (
<nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="#">
<img src={cartImg} style={{ maxWidth: 30 }} alt="" />
{cart.length > 0 && <span className="badge badge-warning badge-header">{cart.length}</span>}
<div className="navbar-cart" style={cart.length > 0 ? { width: 150 } : { width: 'fit-content' }}>
<h6> {cart.length == 0 ? 'Cart is Empty' : getCart(cart)}</h6>
</div>
</a>
</nav>
)
}

Answer 1

You can remove duplicates by:
const duplicatedData = [1,2,3,4,5,1,2,1,1,1,1,3,4,5,6,7,8,2,1,3,4]
const notDuplicatedData = [...new Set(duplicatedData)]
console.log(notDuplicatedData)
So in your case:
[...new Set(products)].map((product, index)