In react-js I have a div with onClick function the click time i wand a selection border to that div, It has already a border
.section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.section-divs {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
background-color: #fff;
border: 4px solid red;
cursor: pointer,
}
.selected {
border: 4px solid blue;
}<html>
<head>
</head>
<body>
<div className='section'>
<div className={`section-divs${selectedDiv === div1 ? " selected" : undefined}`} /*onClick='clickMe'*/>
Click me
</div>
<div className={`section-divs${selectedDiv === div2 ? " selected" : undefined}`} /*onClick='clickMe'*/>
Click me
</div>
</div>
</body>
</html>I wand add no extra div this code, In selection time the two div are show how its possible, the functionality are working selected div are show in browser elements. the style is issue in section-divs class already have border in red color in selected time i wand a outline blue border please help me to solve this issue
As per my understanding of your issue. This code snippet will solve your issue. Demo
export default function App() {
const [selectedDiv, setSelectedDiv] = useState("");
return (
<div className="section">
<div
className={`section-divs ${
selectedDiv === "div1" ? " selected" : undefined
}`}
onClick={() => setSelectedDiv("div1")}
>
Click me
</div>
<div
className={`section-divs ${
selectedDiv === "div2" ? " selected" : undefined
}`}
onClick={() => setSelectedDiv("div2")}
>
Click me
</div>
</div>
);
}
.App {
font-family: sans-serif;
text-align: center;
}
.section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.section-divs {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
background-color: #fff;
border: 4px solid red;
cursor: pointer;
}
.selected {
outline: 4px solid blue;
}