I have a code like this
const dailyRef = createRef();
const monthlyRef = createRef();
const annuallyRef = createRef();
const handleBillingCycleClick = ({target}) => {
const value = target.dataSet.value
// assign an attribute value (backgroundColor) to the clicked button
// how to know the clicked button ref here?
// I want to have access to the clicked button ref, so I can do something like this:
// CLICKED-BUTTON-REF.current.variant = "contained" .ie. <Button variant='contained'>
}
<FormControl>
<Typography variant="overline" sx={{ fontWeight: 'fontWeightBold' }}>
Billing cycle
</Typography>
<ButtonGroup variant="outlined" onClick={handleBillingCycleClick}>
<Button ref={dailyRef} data-value="daily">Daily</Button>
<Button ref={monthlyRef} data-value="monthly">Monthly</Button>
<Button ref={annuallyRef} data-value="annually">Annually</Button>
</ButtonGroup>
</FormControl>
I am using Material UI as a components library, but the same concepts will apply without using it.
I tried to do the following but of course, it's not going to work without eval():
[${value}Ref].current.variant = 'contained'
You can use object as follow:
const myRefs = {
daily: createRef(),
monthly: createRef(),
annually: createRef()
};
const handleBillingCycleClick = ({target}) => {
const value = target.dataSet.value
const reference = myRefs[value];
// now you can use the reference here
}
<FormControl>
<Typography variant="overline" sx={{ fontWeight: 'fontWeightBold' }}>
Billing cycle
</Typography>
<ButtonGroup variant="outlined" onClick={handleBillingCycleClick}>
<Button ref={myRefs.daily} data-value="daily">Daily</Button>
<Button ref={myRefs.monthly} data-value="monthly">Monthly</Button>
<Button ref={myRefs.annually} data-value="annually">Annually</Button>
</ButtonGroup>
</FormControl>