I include a dropdown button to React from bootstrap Dropdowns, But it is not working and shows as a normal button. Can you give me a solution for this?
<div className="dropdown">
<button className="btn btn-secondary
dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Dropdown button
</button>
<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a className="dropdown-item" href="#">Action</a>
<a className="dropdown-item" href="#">Another action</a>
<a className="dropdown-item" href="#">Something else here</a>
</div>
</div>
The output is a normal button like this.
Dropdowns are not working without popper.js and jquery.js.
So please install popper.js and jquery.js in your system using npm install popper.js jquery --save and don't forget to include it.
With CDN
https://stackblitz.com/edit/create-react-class-m3qfxu?file=index.html
With NPM
https://stackblitz.com/edit/create-react-class-xvsthx?file=index.js
If someone doesn't want to install other dependencies, they can make it work using react useState hook.
import React, { useState } from 'react';
export default function DropCard() {
const [dropdown, setDropdown] = useState(false);
const toggleOpen = () => setDropdown(!dropdown);
return (
<div className="dropdown">
<button onClick={toggleOpen}>
Dropdown
</button>
<div
className={`dropdown-menu ${dropdown ? 'show' : ''}`}
aria-labelledby="dropdownMenuButton"
>
<a className="dropdown-item" href="#">
Delete
</a>
<a className="dropdown-item" href="#">
Pin to your Profile
</a>
</div>
</div>
);
}
Make sure you have the bootstrap js imported correctly
npm install --save bootstrap
then import "bootstrap/dist/js/bootstrap.min.js";
This worked for me.
To solve this issue need to pass rootCloseEvent, for example
<DropdownButton
title="Download"
rootCloseEvent="mousedown"
>
<MenuItem
onClick={}
>
PDF
</MenuItem>
<MenuItem
onClick={}
>
CSV
</MenuItem>
<DropdownButton/>
Related
I want to render user name in the navbar if the user is logged in. If I use Normal Text inside h1, like User I get that in the browser but when I'm using {user.name} it's not getting me the name of user from database.
I have tried like this
import React from "react";
function Navbar() {
const user = JSON.parse(localStorage.getItem("currentUser"));
return (
<div>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
Book Rooms
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
{user ? (
<>
<h1 style={{color: 'white'}}>user</h1>
</>
) : (
<>
<li class="nav-item active">
<a class="nav-link" href="/register">
Register
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login">
Login
</a>
</li>
</>
)}
</ul>
</div>
</nav>
</div>
);
}
export default Navbar;
Try updating your <h1> tag to
<h1 style={{color: 'white'}}>{user.name}</h1>
First make sure to console.log the user before component rendering to confirm that the user object is present in the localStorage :
const user = JSON.parse(localStorage.getItem("currentUser"));
console.log(user);
if you get a good looking result in the console then procede to use in in any part of the rendered component like so
{user}
for example:
return (
....
..
.
<h1 style={{color: 'white'}}>USERNAME: {user.name}</h1>
...
..
.
)
at this point if you cannot see the element on screen it's most likely due to bad css, perhaps the element is out of screen or hidden. From the ChromeDevtools Inspect panel search for USERNAME (given that you used my example from the previous line) and use the mouse to highlight where is the h1 located; fix the CSS accordingly.
I'm trying to build a Dropdown component in React with Bootstrap styling without using a library like react-bootstrap or reactstrap.
I'm a little confused on how to implement the bootstrap javascript into a React component.
I suspect I need to use refs to instantiate a new Dropdown class, but with what I have below the dropdown does nothing and there are no errors in console.
import React, { useRef, useEffect } from 'react'
import '#popperjs/core'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.js'
import { Dropdown } from 'bootstrap'
function App() {
const dropdownRef = useRef<any>(null)
useEffect(() => {
if (dropdownRef.current) {
new Dropdown(dropdownRef.current, {
autoClose: 'inside'
})
}
}, [dropdownRef.current])
return (
<div>
<div className="dropdown">
<button
className="btn btn-secondary dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
ref={dropdownRef}
>
Dropdown button
</button>
<ul className="dropdown-menu dropdown-menu-dark">
<li><a className="dropdown-item active" 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>
<li><hr className="dropdown-divider" /></li>
<li><a className="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
);
}
What am I missing here? The docs are pretty sparse on how to implement the javascript.
I'm making a react project, where I need to put a navbar, I installed bootstrap with
npm install bootstrap
and I imported it in my index.js like this :
import 'bootstrap/dist/css/bootstrap.css';
I put the bootstrap's documentation navbar exemple in my component, but the button doesn't show the links.
Here's my code :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
I tried to add :
import 'bootstrap/dist/js/bootstrap.js';
in my index.js file but, it didn't work
Do you have any idea, to solve this ?
First install bootstrap npm install bootstrap and than install jquery and popper.js to, npm install jquery popper.js.
Add all to index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import $ from 'jquery';
import Popper from 'popper.js';
I've been using Bootstrap 5 for a while not noticing something may not work.
Then I found a model requires #popper/core, not just popper.js.
I installed it and suddenly my dropdowns stopped working.
The context: I use the dropdown in my React JSX layout.
React 16.11.0
Bootstrap 5.1.3
Some code:
import Popper from '#popperjs/core';
import $ from 'jquery';
//import { Dropdown } from 'bootstrap'; <-- doesn't help
import 'bootstrap/dist/js/bootstrap.bundle.min';
...
<div className="dropdown">
<button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<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>
It started working after I removed the "flat" reference to the bootstrap:
import 'bootstrap/dist/js/bootstrap.bundle.min';
From here:
https://gitlab.com/simevo/dropdown/-/commit/624e010e7aaba574bbab4af431054d4c5e47e80e
I have a Login component in my header(bootstrap) which needs to open a Modal when I click. I am using the Modal from react-modal (npm package).
Even though I am not getting an error the popup won't open.
this.state={
openModal:false
}
closeModal=()=>{
this.setState({openModal:false})
}
handleOnClick=()=>{
this.setState({openModal:true}
}
Header Component
` <ul className="nav navbar-nav navbar-right">
<li onClick={this.handleOnClick()}><a href="#">
<Modal
isOpen={this.state.openModal}
onRequestClose={this.closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<span class="glyphicon glyphicon-user"></span></Modal> Sign Up</a></li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>`
You need to remove the brackets () from the call. What you give to onClick is the function to call, not the code to run like in other frameworks like Angular.
So, that'll be onClick={this.handleOnClick}
This is the working code.
<ul className="nav navbar-nav navbar-right">
<li onClick={this.handleOnClick}><a href="#">
<Modal
isOpen={this.state.openModal}
onRequestClose={this.closeModal}
style={customStyles}
content
><LoginComponent />
</Modal> Login</a></li>