He renderizado 3 opciones de plan de una matriz de objetos que obtengo del backend.
Si el plan que se presenta es
Esta lógica para renderizar está funcionando bien.
Pero cuando los usuarios hacen clic en un botón, no puedo identificar en qué opción hicieron clic. Necesito actualizar los eventos de clic del controlador en función del plan que se representa.
Actualmente, estoy iterando a través del mapa de niveles y, para cada nivel, estoy representando el botón con el texto apropiado. La función para mostrar el texto básicamente verifica los precios escalonados y devuelve la actualización, la degradación o el plan actual. Necesito una forma de actualizar el clic del controlador al igual que el texto.
¿Cómo puedo actualizar dinámicamente los eventos de clic del controlador en función del nivel que se representa?
const [confirmation, setConfirmation] = useState(false); const handleConfirmation = () => { setConfirmation(true); console.log('button is clicked'); }; <div className='px-8 lg:px-24 grid grid-cols-3 gap-8'> {tiers.map((tier) => ( <div key={tier.title} className='relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col' > <div className='flex-1'> <h3 className='text-xl font-semibold text-gray-900'>{tier.title}</h3> {tier.value ? ( <p className='absolute top-0 py-1.5 px-4 bg-grays-600 rounded-full text-xs font-semibold uppercase tracking-wide text-white transform-translate-y-1/2'> VALUE PLAN </p> ) : tier.recommended ? ( <p className='absolute top-0 py-1.5 px-4 bg-blue-500 rounded-full text-xs font-semibold uppercase tracking-wide text-white transform -translate-y-1/2'> RECOMMENDED PLAN </p> ) : ( '' )} <Button text={determineCTAText(tier)} size='fullwidth' variant='primary' className='m-auto mt-8 text-center block' handleClick={handleConfirmation}> </Button> }Puede modificar la función handleConfirmation para recibir un objeto de tier y devolver una función en su lugar. Esto creará un cierre sobre el valor del tier y le permitirá acceder a él cuando se llame a la devolución de llamada del botón.
const handleConfirmation = (tier) => { // Returns the callback function that will be called, with the specific `tier` value in scope return () => { setConfirmation(true); // You can access any `tier` property here console.log(`button for tier ${tier.title} was clicked`); }; } return ( <div className='px-8 lg:px-24 grid grid-cols-3 gap-8'> {tiers.map((tier) => ( {/* Omitted rest of the JSX for simplicity */} <Button text={determineCTAText(tier)} size='fullwidth' variant='primary' className='m-auto mt-8 text-centerblock' handleClick={handleConfirmation(tier)}> </Button> } </div> )