Tengo dos componentes: MainContainer y Cart . En MainContainer , tengo un botón y, cuando se hace clic, llama a una función addToCart con un argumento de id , que luego tiene que representar el componente Cart . Paso ese argumento como accesorio y luego extraigo el valor del accesorio en el componente Cart . Cuando hago clic en el botón, el componente no se procesa. Tampoco hay errores.

MainContainer.js

 import React, { useState } from "react"; import Cart from "./Cart"; import { data } from "./data"; import { Link } from "react-router-dom"; function MainContainer() { function addToCart(id) { return ( <div> <Cart id={id}></Cart> </div> ); } return ( <div className=" grid grid-cols-6"> {data.map((item) => ( <div key={item.id} className=" w-52 h-64 m-6 flex flex-col bg-gray-100 shadow-lg border-gray-200 border p-4 items-center justify-center rounded-lg relative" > <Link to="/cart"> {" "} <i className="fa-solid fa-cart-plus absolute top-3 right-3 cursor-pointer text-lg" onClick={() => addToCart(item.id)} ></i> </Link> <img className=" w-32 h-32" src={item.image} alt="" /> <div className=" bg-gray-300 w-full p-2 rounded-lg mt-2 text-center"> <p className=" font-semibold text-lg"> {item.name}</p> <p>$ {item.price}</p> <p>{item.rating}</p> </div> </div> ))} </div> ); } export default MainContainer;

Carrito.js

 import React from "react"; function Cart(props) { return ( <div> <h1>hi {props.id} </h1> </div> ); } export default Cart;