creo una función const showContent=(id)=>{} y si hago clic en el botón particular, mostrarán id en const showContent = (id)=>{console.log(id)} así .....

dentro de este Cart.jsx renderizo CartStyle.jsx usando el método de mapa, por lo que este botón de eliminación está aquí.

Carro

 function Cart() { const [data, setData] = useState([]) useEffect(() => { const data = JSON.parse(localStorage.getItem('Cart')); data.map(async (v) => { try { axios.get(`/cart/${v}`) .then((res) => { return setData((preV) => { return [...preV, res.data] }) }) .catch(e => { console.log(e) }) } catch (e) { console.log(e); } }) }, []) const showContent=(id)=>{ console.log('this is id', id) } return ( <> <div className=" cartStyle row g-3"> <div className="left col-md-4"> <button className="btn btn-primary">Proceed to Buy</button> </div> </div> <div className="right col-md-8 flex flex-wrap justify-around"> { data.map((v, i) => { return <CartStyle key={i} id={i} title={v.title} price={v.DiscountPrice} img={v.image} delete={showContent(i)} /> }) } </div> </div> </> ) } export { Profile, Cart };

CartStyle este es un CartStyle significa que estoy pasando datos de Cart.jsx a CarStyle.jsx usando props

 const CartStyle= (props) => { return ( <> <div style={{ width: '22em', height: '10em'}} className=" p-2 row g-3 card container rounded-2xl shadow py-2 my-3"> <button id="delBtn" onClick={props.delete} className="btn btn-primary my-2">Delete</button> </div> </div> </> ) }; export default CartStyle;