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>
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 am using bootstrap 5.1 without third-party libaries like react-bootstrap or ... in my React App.
I am able to see the dropdown button is working properly on my react app but I cannot capture the values on selecting different options of drop down. I tried to replace the <a> tags with <option value='...'> but wasn't successful . Any idea ?
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
The a tag doesn't support value attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
Similarly, you can't have option tag without a select/datalist/optgroup (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option).
If you need some type of value associated with the tags anyway, use something like: data-value={your_value}. And then work with the dataset of the element clicked.
You can try with the below code
export default function App() {
const onChangeClick = (value) => {
console.log(value);
};
return (
<div class="dropdown">
<a
class="btn btn-secondary dropdown-toggle"
href="#"
role="button"
id="dropdownMenuLink"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li>
<a
class="dropdown-item"
href="#"
onClick={() => onChangeClick("action")}
>
Action
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
onClick={() => onChangeClick("another action")}
>
Another action
</a>
</li>
<li>
<a
class="dropdown-item"
href="#"
onClick={() => onChangeClick("else action")}
>
Something else here
</a>
</li>
</ul>
</div>
);
}
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/>
The NavLink of react router does not route to the appropriate page when the Navlink reside in the dropdown.
Below the Html struture tried to implement in React
<BrowserRouter>
<header className="menubar">
<nav className="navbar navbar-expand-sm">
<button className="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="menu">
<ul className="navbar-nav">
<li className="nav-item">
<div className="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="loanlink">
<a href="#!" className="nav-link dropdown-toggle">
<span className="menuTitle">Loan</span>
</a>
<div className="dropdown-menu dropdown-menu-center" aria-labelledby="loanlink">
<div className="menuPointer"></div>
<NavLink className="dropdown-item" to="/loan">
<div className="menuContent">
<span className="menuTitle">Manage Loan</span>
</div>
</NavLink>
</div>
</div>
</li>
<li className="nav-item">
<NavLink className="nav-link dropdown-toggle" to="/revenue" >
<span className="menuTitle">Revenue</span>
</NavLink>
</li>
</ul>
</div>
</nav>
</header>
</BrowserRouter>
In the above code, the "revenue" link which is not dropdown-menu is working fine, but the links which are inside dropdown-menu is not working.
I think the dropdown toggle event prevents the react router navigation.
Am using React router and Bootstrap 4 (not reactstrap)
This is a late answer, but the problem is that Bootstrap's data-toggle for the Dropdown is preventing the route from working.
You can solve it by toggling the Dropdown using React state, instead of using the data-toggle behavior in Bootstrap.
<li className="nav-item">
<div className="dropdown" display="static" onClick={this.handleClick}>
<a href="#!" className="nav-link dropdown-toggle">
<span className="menuTitle">Loan</span>
</a>
<div className={this.state.showDD?'dropdown-menu show':'dropdown-menu'}>
<NavLink className="dropdown-item" to="/loan">
<span>Manage Loan</span>
</NavLink>
</div>
</div>
</li>
https://codeply.com/p/auvCgEmeiD
I have a menu of nageção that works perfectly the class when clicking the option corespondente. Inside this page that opens when clicking on the menu there is a button that leads to another page, after clicking the menu loses the active class. How do I indicate that I'm still in that session.
First page working .. but clicking the button ..
the menu does not remain active
HTML
<li ng-class="{active: 'home.produtos'}">
<a href="">
<i class="fa fa-fa-briefcase"></i>
<span class="nav-label">Produtos</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level collapse" ng-class="{in: $state.includes('home.produtos','home.etiquetas','home.etiquetasview')}">
<li>
<a ui-sref="home.produtos">Produto</a>
</li>
<li ui-sref-active-eq="active">
<a ui-sref="home.etiquetas">Etiqueta</a>
</li>
</ul>
</li>
Button in page
<a ui-sref-active-eq="active" ui-sref="home.etiquetasview({id:{{item.codigo}}})" class="btn btn-white btn-sm">
<i class="fa fa-eye"></i> View
</a>
<a ui-sref-active="active" ui-sref="home.etiquetasview({id:{{item.codigo}}})" class="btn btn-white btn-sm">
<i class="fa fa-eye"></i> View
</a>
May be this Can Help You Angular-ui-router: ui-sref-active and nested states