As a newcomer to reactjs, I am working with an array that looks like this:
const mediumNames = ["TAMIL Medium", "ENGLISH MEDIUM"]
Using the above code, I have created two cards:
const [selectedMediumColor, setSelectedMediumColor] = useState('')
<div>
{mediumNames.map((text, index,) => (
<Card style={{ border: selectedMediumColor }} onClick={() => onClickMedium(text,index)} >
<div >
<img className={classes.imginCardBoard} src={TNlogo}></img>
<Typography className={classes.textinCardBoard} > { text} </Typography>
</div>
</Card>
))}
</div>
I am trying to implement a scenario where clicking on a card in ReactJS changes its border color. The first card should have a blue border when selected while the second card should have a white one, and vice versa.
Below is the function I came up with:
const onClickMedium = (medium,indexno) => {
console.log(medium)
console.log(indexno)
if (medium === "TAMIL Medium") {
selectedMediumColor('2px solid #00adb5')
}
else {
selectedMediumColor('')
}
}
The issue I am facing is that the color setting applies to both cards. See the image here: enter image description here
I'm seeking guidance on how to modify this functionality so that only one card's color is changed at a time. Any help or suggested solutions would be greatly appreciated. Thank you!