1

Hola y gracias por la ayuda, estoy utilizando bootstrap 5 para dar estilo a una app en react, pero tengo problemas al incluir el js del componente de bootstrap. Aqui comparto el codigo de como hago la importación.

import "bootstrap/dist/css/bootstrap.css";
import { Dropdown } from "bootstrap";

function App() {

  return (
      <div>
          <div className="dropdown">
            <a 
                className="btn btn-secondary dropdown-toggle" 
                href="#/" 
                role="button" 
                id="dropdownMenuLink" 
                data-bs-toggle="dropdown" 
                aria-expanded="false">
                   Dropdown link
           </a>

          <ul className="dropdown-menu" aria-labelledby="dropdownMenuLink">
             <li><a className="dropdown-item" href="#/">Action</a></li>
             <li><a className="dropdown-item" href="#/">Another action</a></li>
             <li><a className="dropdown-item" href="#/">Something else here</a></li>
         </ul>
       </div>
    </div>
  );
}

export default App;

Al ejecutar el codigo con npm start la app trabaja bien y no tengo problema con el componente de bootstrap el Dropdown despliega. El problema es que en la consola recibo una advertencia es la siguiente:

WARNING in src\component\Sidebar.jsx Line 5:10: 'Dropdown' is defined but never used no-unused-vars

webpack 5.65.0 compiled with 1 warning in 696 ms

Entiendo que tengo que definir Dropdown en alguna parte, pero no se donde y como. Aprecio la ayuda de antemano. La solución a esta pregunta es una forma de eliminar la abvertencia usando buenas practicas. Pues una simple solución es agregando : // eslint-disable-next-line y esLint no la mostraría, pero esta no es una solución definitiva.

1 respuesta 1

1

He logrado importar el js del componente de bootstrap 5, sin errores. Aqui el codigo:

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/js/dist/dropdown.js";

function App() {
  return (
    <div>
      <div className="dropdown">
        <a
          className="btn btn-secondary dropdown-toggle"
          href="/"
          role="button"
          id="dropdownMenuLink"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          Dropdown link
        </a>

        <ul className="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <li>
            <a className="dropdown-item" href="/">
              Action
            </a>
          </li>
          <li>
            <a className="dropdown-item" href="/">
              Another action
            </a>
          </li>
          <li>
            <a className="dropdown-item" href="/">
              Something else here
            </a>
          </li>
        </ul>
      </div>
    </div>
  );
}

export default App;

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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