style react component on click - reactjs

Question

so i have this simple divs of names:
i just want to press on one of them and get a background color of green and when pressing on another one the first one will be canceled so just one will be colored at a time. what i simply need is inline style or i don't know i'm stuck.
first.js:
import React from 'react';
function SidebarComponents({name,title,selected,onSelect}) {
const style={
cursor: "pointer"
};
const classes = {
selected: {
backgroundColor: '#00ff00'
}
}
return (
<div
name={name}
title = {title}
style={style}
>
{name}
</div>
)
}
export default SidebarComponents;
second.js:
import React, { useEffect, useState } from "react";
import SidebarComponents from "../SidebarComponents/SidebarComponents";
import 'bootstrap/dist/css/bootstrap.min.css';
import '../Sidebar1/Sidebar.css';
function Sidebar({ onChange }) {
const [selectedComponent, setSelectedComponent] = useState({
componentsName: [
{ name: "John Smith", title: "John Smith" },
{ name: "Male, 26 years old", title: "Gender and age" },
{ name: "john", title: "Alerts" },
{ name: "claude", title: "Recent" },
{ name: "edward", title: "Blood pressure" },
{ name: "mira", title: "Body weight" },
{ name: "alex", title: "Glucose" },
{ name: "zac", title: "SPO2" }
]
});
return (
<div>
{selectedComponent.componentsName.map(component => {
return (
<div className="row align-items-start sidebar-components">
<div className="col">
<SidebarComponents
name={component.name}
title={component.title}
/>
</div>
</div>
);
})}
</div>
);
}
export default Sidebar;

Answer 1

on Sidebar:
const [selectedName, setSelectedName] = useState(null);
//...
<SidebarComponents
name={component.name}
title={component.title}
selected={component.name === selectedName}
onSelect={setSelectedName}
/>
on SidebarComponents:
const selectedClassName = selected ? 'selected' : '';
//...
<div
name={name}
title={title}
style={style}
className={`sidebar ${selectedClassName}`} //you must add sidebar and selected classes to your styles
onClick={() => onSelect(name)}
>
{name}
</div>

Answer 2

Add key attribute to div, inside the map.
Handel onClick event, to store the selected element index/value in your state.
Apply style using conditional rendering of className.
second.js
<div>
{selectedComponent.componentsName.map((component, index) => {
return (
<div key={index} onClick={() => handelOnClick(index)} className="row align-items-start sidebar-components">
<div className="col">
<SidebarComponents
name={component.name}
title={component.title}
className={selectedIndex === index ? 'highlight' : ''}
/>
</div>
</div>
);
})}
</div>
As you are rendering text in first.js no need to use div wrapper, use 'p', 'span' tag
In second.js instead of iterating entire div block, use ul li