0

Hola chicos espero me puedan ayudar.

Estoy haciendo un sidebar la cual tiene 6 elementos; pero a futuro podría tener mas conforme avance el proyecto. La idea que pretendo es que cuando haga click en algún elemento este ponga su background de color verde y cuando cambie a otro elemento, el anterior se desactive y/o desaparezca(esa parte esta) y ahora se pinte en el nuevo elemento seleccionado.

Estoy comenzando con react y de verdad que he tratado de hacerlo y no me da, espero que con su ayuda pueda esclarecer dudas y resolverlo.

Pueden ver el ejercicio aquí: https://codesandbox.io/s/focus-side-bar-s55x6

Describo mi código aquí

import React from "react";

let getActive = () => {
  let li = document.querySelectorAll("li");
  let arrayLi = Array.from(li);

  let activo = arrayLi.find(cv => cv.classList.contains("active"));

  if (activo) {
    activo.classList.remove("active");
  }

  console.log(arrayLi);
};

const SideBar = () => {
  return (
    <section id="side-bar" className="">
      <nav className="nav-menu" onClick={() => getActive()}>
        <ul id="ul" className="text-base uppercase">
          <li
            id={1}
            className="hover:text-white py-2 border-b bg-green-500 active"
          >
            <a href="#home" className="pl-10">
              <span className="">
                <i className="fas fa-home" />
              </span>
              <span className="ml-4">Home</span>
            </a>
          </li>
          <li
            id={2}
            className="hover:text-white hover:bg-blue-600 py-2 border-b li"
          >
            <a href="#about" className="pl-10">
              <span className="">
                <i className="fas fa-user" />
              </span>
              <span className="ml-4">About Me</span>
            </a>
          </li>
          <li
            id={3}
            className="hover:text-white hover:bg-blue-600 py-2 border-b li"
          >
            <a href="#resume" className="pl-10">
              <span className="">
                <i className="fas fa-file" />
              </span>
              <span className="ml-4">Resume</span>
            </a>
          </li>
          <li
            id={4}
            className="hover:text-white hover:bg-blue-600 py-2 border-b li"
          >
            <a href="#portfolio" className="pl-10">
              <span className="">
                <i className="fas fa-briefcase" />
              </span>
              <span className="ml-4">Portfolio</span>
            </a>
          </li>
          <li
            id={5}
            className="hover:text-white hover:bg-blue-600 py-2 border-b li"
          >
            <a href="#blog" className="pl-10">
              <span className="">
                <i className="fas fa-book" />
              </span>
              <span className="ml-4">Blog</span>
            </a>
          </li>
          <li
            id={6}
            className="hover:text-white hover:bg-blue-600 py-2 border-b li"
          >
            <a href="#contact" className="pl-10">
              <span className="">
                <i className="fas fa-phone-square" />
              </span>
              <span className="ml-4">Contact</span>
            </a>
          </li>
        </ul>
      </nav>
    </section>
  );
};

export default SideBar;

1 respuesta 1

0

Te dejo una alternativa que podrias usar para hacer lo que deaseas.

El codigo lo que hace es que usa el hook useState, para que el componente tenga un estado, en ese estado se guarda el index de el li al que se le da click, en este caso es el index que genera el .map pero podrias usar un id que tu desees. En la parte del className se agrega la clase active solo si activeList es igual al index actual de la iteracion del .map.

Y como otra observacion, en el codigo que compartes repites mucho codigo similar, entonces lo que se hace en aqui abajo es solo tomar la parte donde se genera los list items y se itera con el arreglo listOptions, en el puedes agregar o quitar opciones.

import React, { useState } from "react";

const listOptions = [
  { text: "Home", route: "#home" },
  { text: "About Me", route: "#about-me" },
  { text: "Resume", route: "#resume" },
  { text: "Portfolio", route: "#portfolio" },
  { text: "Blog", route: "#blog" },
  { text: "Contact", route: "#contact" }
];

const SideBar = () => {
  const [activeLink, setActiveLink] = useState(null);

  const renderList = () => {
    return listOptions.map((option, index) => {
      return (
        <li
          key={index}
          onClick={() => setActiveLink(index)}
          id={1}
          className={`hover:text-white py-2 border-b bg-green-500 ${
            activeLink === index ? "active" : ""
          }`}
        >
          <a href={option.route} className="pl-10">
            <span className="">
              <i className="fas fa-home" />
            </span>
            <span className="ml-4">{option.text}</span>
          </a>
        </li>
      );
    });
  };

  return (
    <section id="side-bar" className="">
      <nav className="nav-menu">
        <ul id="ul" className="text-base uppercase">
          {renderList()}
        </ul>
      </nav>
    </section>
  );
};

export default SideBar;

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.