How to distinguish user clicks between different buttons?

Question

I have rendered 3 plan options from an object array I get from the backend.

If the plan being rendered is

• cheaper, the user's subscription then its corresponding button would say downgrade,
• costlier, the button would say upgrade, if it is the same then the button would say current.

This logic for rendering is working fine.

But when users click on a button I am not able to identify which option they clicked. I need to update the handle click events based on the plan being rendered.

Currently, I am iterating through the tiers map, and for each tier, I am rendering the button with appropriate text. The function to display the text basically checks for the tiered pricing and returns upgrade or downgrade or current plan. I need a way to update the handle click just like the text.

How can I dynamically update the handle click events based on the tier being rendered?

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>
    }

                   

Answer 1

You can modify the handleConfirmation function to receive a tier object and return a function instead. This will create a closure over the tier value and let you access it when the button's callback is called.

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>
)