Add a border to a div in onClick time in react-js
Question
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
1 answers
solution1
1 ACCPTED 2022-06-24 12:14:00
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.