Home / Questions / 561049
Accepted
Naidamag
Asked: 2022-10-08 08:20:37 +0800 CST 2022-10-08 08:20:37 +0800 CST

How to mark the selection of a div when clicking on it in Reactjs

  • 772

I have 3 containers (div) I want that when clicking on one of these the one I am selecting is highlighted. I don't know what kind of css can help me or if in its effect I would have to use a function.

This is my code:

import '../assets/styles/OptionContainer.css';

const OptionContainer = (props) => {

  return (
    <section className='itemsSelected'>
      <div className='rows'>
        Filas
        <br />
        <button className='btnSelect'></button>
      </div>
      <article className='container_col_val'>
        <div className='columns'>
          Columnas
        <br />
        <button className='btnSelect'></button>
        </div>
        <div className='values'>
          Valores
        <br />
          <button className='btnSelect'></button>
        </div>
      </article>
    </section>
  )
}

export default OptionContainer;

This is how the containers look, I need that when you select one, for example rows, it is highlighted and remains active, but if I click on another then the other is the one that is activated and so on

enter image description here

css

1 Answers

  1. Best Answer

    Use a hook like React.useStateto define a state that lets you know which element is active at all times. The state you define can be one indexor any kind of identifier that allows you to differentiate one element from another, that way you will know when to apply the active state or not.

    You can use the following example as a reference (press run and you will see how it works):

    /* estilos básicos para los containers a modo de ejemplo: */
.wrapper {
  display: flex;
  gap: .4rem;
}

.container {
  width: 100px;
  height: 100px;
  background: lightgrey;
  border: 2px solid grey;
  border-radius: 10px;
  cursor: pointer;
  transition: .3s all ease;
}

.container:hover {
  background: #bbbbbb;
  border: 2px solid black;
}

/* los containers con la clase "active" tendrán un background naranjado: */
.container.active {
  background: orange;
  border: 2px solid black;
}
    <div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>

<script type="text/babel">
  function Container({ active, onClick }) {
     // cada container recibe una propiedad booleana "active"
     // si la propiedad es "true", se agrega la clase "active" al elemento.
     // adicionalmente se añade un listener al evento click:
     return (
      <div className={`container ${active ? 'active' : ''}`} onClick={onClick}></div>
    );
  }

  function App() {
    // aqui uso un indice como estado para saber cual es el elemento
    // activo en un momento dado:
    const [activeIndex, setActiveIndex] = React.useState(null);
    // "null" por defecto, para indicar que no hay elemento activo al principio

    // con este handler actualizo el indice activo cada vez que
    // presiona click sobre alguno de los elementos:
    const onClickHandler = (index) => {
      setActiveIndex(index);
    };

    // la vista simplemente consiste en asignar un indice a cada elemento,
    // el primer elemento es el indice 0, el segundo es 1 y así sucesivamente...
    return (
      <div className="wrapper">
        <Container active={activeIndex === 0} onClick={() => onClickHandler(0)} />
        <Container active={activeIndex === 1} onClick={() => onClickHandler(1)} />
        <Container active={activeIndex === 2} onClick={() => onClickHandler(2)} />
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>

    • 1