Add a border to a div in onClick time in react-js-CodePudding

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

CodePudding user response：

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;
}