add background color onClick in react - reactjs

Question

so i have this flexbox:
[![flexbox][1]][1]
what i need is this:
when i press on any the divs on the left from overview to the bottom i need it to be colored in white the background just like in the image, i'm new to react and i'm trying to go through this project can anyone help me with this i'm stuck.
code so far:
flexbox.js:
const sidebar = (props) => (
<div>
<div className="container">
<div className="flex-item item-1" onClick={}>John Smith</div>
<div className="flex-item item-2">Male, 26 years old</div>
<div className="flex-item item-3">Overview</div>
<div className="flex-item item-4">Alerts</div>
<div className="flex-item item-5">Recent</div>
<div className="flex-item item-6">Blood Pressure</div>
<div className="flex-item item-7">Body Weight</div>
<div className="flex-item item-8">Glucose</div>
<div className="flex-item item-9">SpO2</div>
<div className="flex-item item-10"><FontAwesomeIcon icon={faCog}/></div>
</div>
</div>
);
flexbox.css:
.container {
border: 2px solid #57c0e8;
background-color: #57c0e8;
margin-top: 4%;
float: left;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
color:white;
display: flex;
flex-direction: column;
height:40rem;
width:15rem;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
font-size:0.9rem;
}
.flex-item{
margin-top: 2rem;
}
.item-2 {
margin-top: 0rem;
}
.item-3 {
margin-top: 5rem;
}
.item-10{
align-self:center;
}

Answer 1

If you really want to keep your code as it is now, you could simply add a class on each flex item and an onClick method to add a class on the selected item and remove the class on the others.
here is how you can do that :
const MyList = () => {
const setSelectedItem = e => {
Array.from(document.getElementsByClassName("item"))
.forEach(item => item.classList.remove("selected"));
e.target.classList.add("selected");
};
return (
<div>
<ul>
<li className="item" onClick={setSelectedItem}>
item 1
</li>
<li className="item" onClick={setSelectedItem}>
item 2
</li>
<li className="item" onClick={setSelectedItem}>
item 3
</li>
<li className="item" onClick={setSelectedItem}>
item 4
</li>
</ul>
</div>
);
};
But I suggest you to refactor your code to build your sidebar list dinamically, It will be way easier to manage. You can do it this way, with an array containing your data and looping over it :
import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
const App = () => {
const data = [
{ name: "item 1", isSelected: false },
{ name: "item 2", isSelected: false },
{ name: "item 3", isSelected: false },
{ name: "item 4", isSelected: false }
];
const [items, setItems] = React.useState(data);
const setSelectedItem = selectedItem => {
const newItems = [...items];
newItems.forEach(item => {
item.isSelected = item.name === selectedItem.name;
});
setItems(newItems);
};
const buildList = () => {
return items.map(item => (
<li className={item.isSelected ? 'selected':''} onClick={() => setSelectedItem(item)}>
{item.name}
</li>
));
};
return <ul>{buildList()}</ul>;
};
render(<App />, document.getElementById("root"));
Then you only have to write the css on .selected:
li{
padding: 10px;
}
.selected{
background-color: lightskyblue;
border-radius: 50px 0 0 50px;
box-shadow: 2px 2px 5px lightgray;
}
Here is the repro on stackblitz.
Here is used a list but it changes nothing compared to you using flexbox.

Answer 2

Ok, so I'm thinking you could do it by making an active class in your css to make it white:
.sidebarActive {
background:#fff
...
...
}
Then, add a state to your component that can store a string (Or I guess it could be a number and your could store the index of the selected div). This would looks something like:
const sidebar = (props) => {
const [selectedDiv,setSelectedDiv] = React.useState(null)
return (
<div>
<div className="container">
<div className="flex-item item-1" onClick={}>John Smith</div>
...
</div>
</div>
)
}
Then, your onClick function needs to set the state to the correct div:
<div className="flex-item item-1" onClick={()=>setSelectedDiv('John Smith')}>John Smith</div>
And finally, you need to add a conditional to the classNames of the divs - to check if the state is selecting this div:
<div className={
selectedDiv === "John Smith"
?
"flex-item item-1 sidebarActive"
:
"flex-item item-1"
}
onClick={...}
>
John Smith
</div>
There are then many ways to optimise this - Like adding your divs into an array, so that you don't need to type "John Smith", "Overview", "Alerts" and all the rest of them multiple times.
But, this should be enough info to get you somewhere!
Hope it helps :)