How to change style multiple times? - css

Question

I have a graph and I want to display a border around a text. My code works, but only 1 time for adding or removing the border, but my event MouseEnter/MouseLeave works multiple times. Why is this?
const Custom_border = (index) =>
{
data_utilisation.map((data_utilisation, index_1) =>
{
if(index == index_1)
{
console.log("In")
const add_border = document.getElementById(index)
return add_border.classList.add('nice_border')
}
})
return null
}
return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[0]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
All the BarChart (Recharts API) :
<BarChart
width={400}
height={250}
data={data_utilisation}>
<CartesianGrid opacity={0.1} vertical={false} horizontal={false}/>
<XAxis axisLine={false} tickLine={false} stroke="#eeeeee00"/>
<YAxis axisLine={false} tickLine={false} stroke="#eeeeee00"/>
<Bar dataKey="uv" fill="#8884d8">
{
data_utilisation.map((data_utilisation, index) =>
{
if(data_utilisation.uv <= 5000)
{
return <Cell className="my_cell" cursor="pointer" key={`cell-${index}`} fill={colored[0]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
}
else if(data_utilisation.uv > 5000 && data_utilisation.uv <= 10000)
{
return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[1]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
}
else
{
return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[2]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
}
})
}
</Bar>
</BarChart>
The code for display a text next to the Barchart who i need to put the border on :
<div className="Text_1">
{
data_utilisation.map((data_utilisation, index) =>
{
if(data_utilisation.uv <= 5000)
{
return <p id={index} style={{ color: colored[0]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
}
else if(data_utilisation.uv > 5000 && data_utilisation.uv <= 10000)
{
return <p id={index} style={{ color: colored[1]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
}
else
{
return <p id={index} style={{ color: colored[2]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
}})}
</div>

Answer 1

If I'm understanding your use case correctly, you want to show a border when the user hovers over a cell. You can achieve this with css, you just need to figure out how to select the Cell component. Let's assume it has a class name called my-cell, you could simply add the following css.
.my-cell:hover {
border: 1px solid black;
}
To figure out what the class name of the component is, you can inspect it on the dom, if it doesn't have one you can add it like this:
return <Cell className="my-cell" ... />