Tengo una variedad de objetos en rides-context.js . En RidesList.js mapeo los datos de la matriz y los paso al componente para mostrarlos en la pantalla.
const RidesList = (props) => { const rideCtx = useContext(RidesContext); const deleteHandler= () => { rideCtx.onDelete(??) } return ( <ul className={classes.container}> {rideCtx.ridesList.map((ride) => ( <Ride hour={ride.hour} name={ride.name} key={ride.key} id={ride.id} onDelete={deleteHandler}/> ))} </ul> ); };Ahora quiero eliminar un componente después de hacer clic en él. Para hacerlo, debo pasar la identificación del componente a la función que se encuentra en rides-context.js . ¿Cómo puedo obtener la identificación del elemento en el que se ha hecho clic? (onDelete está conectado a onClick en otro archivo)
Lo que quiere aquí es usar un cierre y pasar la identificación del ride al deleteHandler en el lugar donde está disponible. Para hacerlo, puede pasar una función anónima como onDelete prop, que se llamará con ride.id como se muestra a continuación:
const RidesList = (props) => { const rideCtx = useContext(RidesContext); const deleteHanlder = (id) => { rideCtx.onDelete(id) } return ( <ul className={classes.container}> {rideCtx.ridesList.map((ride) => ( <Ride hour={ride.hour} name={ride.name} key={ride.key} id={ride.id} onDelete={() => deleteHandler(ride.id)}/> ))} </ul> ); };