0

tengo la siguiente situacion. Estoy mapeando un lista de nombres, y cada nombre esta en un div. Quiero que al hacer click en algun div, este cambie de color como "seleccionado" pero si hago click en otro div, este vuelva a su color original y se cambie el color del nuevo seleccionado.

He probado usando useState, pero solo he logrado que se marquen todos del mismo color seleccionado.

  let arreglo =["Alex","Victor","Juan","Pablo","Fernando","Esteban"]

const seleccionado = (e) =>{
   
 e.target.className ="h-32 w-32 border-4 bg-red-700 "
  }

{arreglo.map((nombres, index) => (

            <div
              key={index}
              onClick={(e) => {
                seleccionado(e)}}
              className={"h-32 w-32 border-4 bg-blue-300"}
            >
              {nombres}
            </div>
          ))}

Al marcar uno cambia a color rojo, pero si marco otro, también se pone rojo. He intentado varias cosas pero no logro "desactivar" el color al original.

2 respuestas 2

0

Se utiliza la función para seleccionar un elemento y guardarlo al estate luego lo comparas con el className, bueno espero esto sea lo que necesites

export default function App() {

 const [data, setData] = useState("");

  let arreglo = ["Alex", "Victor", "Juan", "Pablo", "Fernando", "Esteban"];
 
  const seleccionado = (nombres) => {
    setData(nombres);
  };

  return (
    <>
      {arreglo.map((nombres, i) => (
        <div
          style={{ cursor: "pointer" }}
          key={i}
          onClick={(e) => seleccionado(nombres)}
          className={data === nombres ? "color" : ""}
        >
          {nombres}
        </div>
      ))}
    </>
  );
}
0

Estimado Ralexhx.

Tengo esta solución para ti, espero sea de ayuda.

Te explico un poco el código:

  • Utilizo una variable para manejar el elemento seleccionado al presionar sobre el.
  • En la función que se encarga de capturar el evento onClick del div asigno el valor contenido en innerHTML a la variable selected
  • Al final solo queda agregar dinamicamente la clase al div para que le ponga el color que desees.

Te dejo por aca el playground para que lo pruebes:

https://stackblitz.com/edit/react-ts-pzle5r?file=App.tsx

export default function App() {
      const [selected, setSelected] = React.useState('');
    
      let arreglo = ['Alex', 'Victor', 'Juan', 'Pablo', 'Fernando', 'Esteban'];
    
      const seleccionado = (e) => {
        setSelected(e.target.innerHTML);
      };
    
      return (
        <div>
          {arreglo.map((item, index) => (
            <div
              key={index}
              onClick={seleccionado}
              className={`item ${selected === item ? 'selected' : ''}`}
            >
              {item}
            </div>
          ))}
        </div>
      );
    }
h1,
p {
  font-family: Lato;
}

.item {
  border: 2px solid black;
  padding: 20px;
  margin: 10px;
}

.selected {
  border: 2px solid red;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.