I am new to reactjs. I have an array that will be
const mediumNames = ["TAMIL Medium", "ENGLISH MEDIUM"]
I have generated two cards using this code:
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 want to set Border Color when clicking Cards in ReactJS. If the user selects the first card, the border color should be blue and the next card border color should be white and vice versa.
Here's the Function Code I wrote:
const onClickMedium = (medium,indexno) => {
console.log(medium)
console.log(indexno)
if (medium === "TAMIL Medium") {
selectedMediumColor('2px solid #00adb5')
}
else {
selectedMediumColor('')
}
}
it is setting the color for both cards. Here's the Image: enter image description here
I want the color to be set for one card only. How can I achieve this? Please Help me with some solutions.
You can try this approach where you can set the selected index:
const [selectedIndex, setSelectedIndex] = useState('')
<div>
{mediumNames.map((text, index,) => (
<Card style={{ border: index === selectedIndex ? '2px solid #00adb5' : 'none'}} onClick={() => setSelectedIndex(index)} >
<div >
<img className={classes.imginCardBoard} src={TNlogo}></img>
<Typography className={classes.textinCardBoard} > { text} </Typography>
</div>
</Card>
))}
</div>
As @Harshit's answer, it is an approach to achieve the result. But it could be extended as follows to handle more than 2 medium in your case as follows
export default function App() {
const mediumNames = ["TAMIL Medium", "ENGLISH MEDIUM"];
const mediumBorder = ["2px solid #00adb5", "2px solid red"];
const [selectedMedium, setSelectedMedium] = useState("");
const [selectedMediumIndex, setSelectedMediumIndex] = useState("");
const onClickMedium = (medium, indexno) => {
setSelectedMedium(medium);
setSelectedMediumIndex(indexno);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<div>
{mediumNames.map((text, index) => (
<div
style={{
border:
selectedMedium === text ? mediumBorder[selectedMediumIndex] : ""
}}
onClick={() => onClickMedium(text, index)}
>
<div>test</div>
</div>
))}
</div>
</div>
);
}
In this way you can handle any number of medium with custom border style for each medium.