set Style using React and Hooks - css

Question

I have been using React JS for a short time. Looking at the following example, I would like to change the background color only on the clicked lines and not all lines. Actually, clicking on a row turns it red and clicking again makes the row background white. Before changing color, I would set all lines to default color states, but something is wrong.
import { useState } from "react";
export default function App() {
const [color, setColor] = useState("white");
const handleClick = (e) => {
const value_color = e.target.style.backgroundColor;
if (value_color != "" && value_color != undefined) {
if (value_color === "white")
var new_color = "red";
else
var new_color = "white";
}
setColor("white");
e.target.style.backgroundColor = new_color;
};
return (
<div>
<div
id={"line1_id"}
style={{
backgroundColor: color
}}
onClick={handleClick}
>
First Line
</div>
<div
id={"line2_id"}
style={{
backgroundColor: color
}}
onClick={handleClick}
>
Second Line
</div>
</div>
);
}
EDIT:
Maybe I have explained the problem wrong. Actually my code works, but clicking on both I get two red lines. In general, when I click on a new line, the other line should go white again. Thank you

Answer 1

Create JSON for the data and use map for rendering the data and updating the backgroundColor
import { useState } from 'react';
export default function App() {
const [data, setData] = useState([
{ id: 1, text: 'First Line', color: 'white' },
{ id: 2, text: 'Second Line', color: 'white' }
]);
const handleClick = item => {
setData(data =>
data.map(n => {
return {
...n,
color: n.id === item.id && n.color === 'white' ? 'red' : 'white'
};
})
);
};
return (
<div>
{data.map(item => (
<div
id={item.id}
key={item.id}
style={{
backgroundColor: item.color
}}
onClick={() => handleClick(item)}
>
{item.text}
</div>
))}
</div>
);
}
here is the Codesandbox example

Answer 2

The new_color value is not defined because you are setting it in the if-else statements. So, only code in the if-else blocks can access them. You can declare a variable and assign a default value outside them and then reassign it:
// some other code
let new_color = "white"
if (value_color != "" && value_color != undefined) {
if (value_color === "white")
new_color = "red";
else
new_color = "white";
}
// some code
e.target.style.backgroundColor = new_color;