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





  
  
    Click me
  
  
    Click me

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

user_17816634 · Answer

As per my understanding of your issue. This code snippet will solve your issue. Demo

export default function App() {
  const [selectedDiv, setSelectedDiv] = useState("");
  return (
    
       setSelectedDiv("div1")}
      >
        Click me
      
       setSelectedDiv("div2")}
      >
        Click me
      
    
  );
}

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

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

1 Answers