Hi and thanks for the help, I'm using bootstrap 5 to style an app in react, but I'm having trouble including the bootstrap component js. Here I share the code of how I do the import.
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;
When executing the code with npm start the app works fine and I have no problem with the bootstrap component the Dropdown displays. The problem is that in the console I receive a warning is the following:
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
I understand that I have to define Dropdown somewhere, but I don't know where and how. I appreciate the help in advance. The solution to this question is a way to eliminate abstinence using good practice. Well, a simple solution is adding: // eslint-disable-next-line and esLint would not show it, but this is not a definitive solution.
Update
https://codesandbox.io/s/loving-platform-q6sqy?file=/src/App.js example in codesandbox
This is correct, you should remove the second import as you import Dropdown class from the bootstrap library, not a React component, so this second import will not work. If you would like to use it as a React component, you need to install react-bootstrap.
Since you are using only bootstrap classes you are good to go, this first import is a correct way of importing bootstrap CSS into the project.
Importing {Dropdown} means you are going to use it as a tag like this: <Dropdown>. If you want to use the dropdown class just like you are doing I guess just importing bootstrap would be enough. So you don't need the second import line.
Edit: bootstrap dropdown requires both css and js bootstrap. So remove the second import with import "bootstrap/dist/js/bootstrap.js"
I have managed to import the js of the bootstrap 5 component, with no errors. Here the code
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;