Having an issue where I need to change the border-color of a single item in a list when clicked on. The items are displayed using the map function and styled components. When I try to use useState to achieve this, it updates every item in the list instead of just one. How can I make sure only the clicked item's color is changed?
<div className="specs-container">
{specification.map((item, index) => {
return (
<div
className="single-spec"
key={index}
id={item}
style={{
backgroundColor: `${item}`,
color: `${item}` === "Black" ? "white" : "",
fontSize: `${id === "Capacity"}` ? "0.7rem" : "20px",
border: `1px solid ${bgcolor} `,
}}
onClick={(e) => {
console.log(e.target.id);
let item = specification.filter((item) => item === e.target.id);
console.log(item);
// if (e.target.id === item[0]) {
// setBgcolor("green");
// }
}}
>
{id === "Capacity" ||
id === "Size" ||
id === "With USB 3 ports" ||
id === "Touch ID in keyboard"
? `${item}`
: ""}
</div>
);
})}
</div>
</SpecWrapper>