I'm trying to put a dropdown menu in my navbar. I'm using the materialize framework, and so far this is the only materialize javascript element I can't get to work. Here's the code I am using for the navbar:
import React, { Component } from "react";
import M, { Dropdown } from "materialize-css";
class Navbar extends Component {
componentDidMount() {
M.Dropdown.init(this.Dropdown);
}
render() {
return (
<div className="navbar-fixed">
<nav>
<div class="nav-wrapper purple">
<a href="/" class="brand-logo">
Logo
</a>
<a class="dropdown-trigger btn right" data-target="dropdown1">
Drop Me!
</a>
<ul
id="dropdown1"
class="dropdown-content"
ref={Dropdown => {
this.Dropdown = Dropdown;
}}
>
<li>
one
</li>
<li>
two
</li>
<li class="divider" tabindex="-1" />
<li>
three
</li>
<li>
<a href="#!">
<i class="material-icons">view_module</i>four
</a>
</li>
<li>
<a href="#!">
<i class="material-icons">cloud</i>five
</a>
</li>
</ul>
</div>
</nav>
</div>
);
}
}
export default Navbar;
Essentially I click the element and nothing happens. Not sure what I'm doing wrong, and I can't find anything similar on Stack overflow. Here's the code sandbox... https://codesandbox.io/s/dawn-snow-3cmdv
Thanks!
Related
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.
This is not something new but for me doing toggle among the side menu item is bit challenging in React application. Please have a look in code and suggest the possible solution:
Here I have multiple menu item and if I click on perticular menu item it should show selected/active:
<div className="offcanvas offcanvas-start sidebar-nav theme-custom-gray"
tabindex="-1"
id="sidebar">
<ul>
<li>
<i>
Dashboard
</li>
<li><hr /></li>
<li>
product
</li>
<li>
<a href="#layouts">
<i>
Create New
<i>
</a>
<ul>
<li>
MenuItem
</li>
<li>
product 1
</li>
<li>
product 2
</li>
<li>
product 3
</li>
</ul>
</li>
<li>
<i>
View List
</li>
<li><hr /></li>
</ul>
App.jsx:
import { useState } from "react";
import "./styles.css";
const menuItems = ["MenuItem 1", "MenuItem 2", "MenuItem 3", "MenuItem 4"];
const App = () => {
const [selectedMI, setSelectedMI] = useState(menuItems[0]);
return (
<ul>
{menuItems.map((menuItem) => (
<li
className={selectedMI === menuItem ? "selected" : ""}
onClick={() => setSelectedMI(menuItem)}
>
{menuItem}
</li>
))}
</ul>
);
};
export default App;
styles.css:
li {
cursor: pointer;
}
li.selected {
text-decoration: underline;
}
i have an issue. I want the styling of my Link to change based on a state. But the issue is that, i have to click on the link twice before the styling is updated. But when i use the e.prevetndefault, the styling is applied when i click the link but I cannot go to the page. Here is the code.
function Footer(){
const [activeValue, setIsActive] = useState("0")
return(
<div className="footer">
<ul className="socials">
<li> <i className="fab fa-facebook-f"></i> </li>
<li> <i className="fab fa-instagram"></i> </li>
<li> <i className="fab fa-twitter"></i> </li>
<li> <i className="fas fa-podcast"></i> </li>
<li></li>
<li><Link to="/peepNews" onClick={()=>{setIsActive("1")}} style={activeValue=="1"?{color:"#0B77BE",fontWeight:"600"}:null} >Peep News</Link></li>
<li><Link to="/faq" onClick={()=>{setIsActive("2")}} style={activeValue=="2"?{color:"#0B77BE",fontWeight:"600"}:null} >FAQ</Link></li>
<li><a href="" style={{color:"gray", fontWeight:"200"}}>Careers</a></li>
<li><Link to="/legal" onClick={()=>{setIsActive("3")}} style={activeValue=="3"?{color:"#0B77BE",fontWeight:"600"}:null} >Legal</Link></li>
<li>Jupe Global </li>
</ul>
</div>
);
}
EDIT:
This is when i added the useEffect hook. But the issue is that whenever the page re-render, the activeValue is set back to the default Value(0) instead of 1,2,3 etc.
function Footer(){
const [activeValue, setIsActive] = useState("0")
useEffect(() => {
setIsActive(activeValue) ;
alert(activeValue);
},[activeValue])
return(
<div className="footer">
<ul className="socials">
<li> <i className="fab fa-facebook-f"></i> </li>
<li> <i className="fab fa-instagram"></i> </li>
<li> <i className="fab fa-twitter"></i> </li>
<li> <i className="fas fa-podcast"></i> </li>
<li></li>
<li><Link to="/peepNews" onClick={()=>{setIsActive("1")}} style={activeValue=="1"?{color:"#0B77BE",fontWeight:"600"}:null} >Peep News</Link></li>
<li><Link to="/faq" onClick={()=>{setIsActive("2")}} style={activeValue=="2"?{color:"#0B77BE",fontWeight:"600"}:null} >FAQ</Link></li>
<li><a href="" style={{color:"gray", fontWeight:"200"}}>Careers</a></li>
<li><Link to="/legal" onClick={()=>{setIsActive("3")}} style={activeValue=="3"?{color:"#0B77BE",fontWeight:"600"}:null} >Legal</Link></li>
<li>Jupe Global </li>
</ul>
</div>
);
}
With react-router you don't need to use the Link element to navigate to a new page, particularly if you want to functionality to be a little more complex.
You can create a history file and export a history object:
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
Then import history into any file where you would like to navigate using javascript. Then in your file you can simply create a which you can style as you please (or continue to use with e.preventDefault()) which then navigates on the click action.
<li>
<div
onClick={() => {
setIsActive("1");
history.push("/peepNews");
}}
style={activeValue == "1" ? { color: "#0B77BE", fontWeight: "600" } : undefined} >
Peep News</div>
</li>
I'm new to react.js. in my code, I would like to pass these menu items such as dashboard, Customer,.. as props, and I would like to use a map on it. I want to use the map function that will return JSX. How can I do this? I did not know how to loop through props and render a list of items. also how I can use the default props for them?
import './Sidebar.css';
import React, { Component } from 'react';
class Sidebar extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<div className="wrapper d-flex align-items-stretch">
<nav id="sidebar">
<div className="custom-menu">
<button type="button" id="sidebarCollapse" className="btn btn-primary">
<i className="fa fa-bars"></i>
<span className="sr-only">Toggle Menu</span>
</button>
</div>
<div className="p-4">
<h1>Donyaro </h1>
<ul className="list-unstyled components mb-5">
<li className="active">
</i> Dashboard
</li>
<li>
</i> Customer
</li>
<li>
</i> Category
</li>
<li>
</i> Transaction
</li>
<li>
</i> Pick-up
</li>
<li>
</i> Stock
</li>
<li>
</i> Financial
</li>
<li>
</i> Report
</li>
</ul>
</div>
<div class="footer">
</i>
<h6><span>Welcome, </span>Add Business
</h6>
</div>
</nav>
</div>
);
}
}
export default Sidebar;
Create the desired array and map through it like this:
import './Sidebar.css';
import React, { Component } from 'react';
class Sidebar extends Component {
constructor(props) {
super(props);
this.state = {
menuItems: ['Dashboard','Customer','Category','Transaction','Pick-up','Stock','Finnancial','Report']
}
}
render() {
return (
<div className="wrapper d-flex align-items-stretch">
<nav id="sidebar">
<div className="custom-menu">
<button type="button" id="sidebarCollapse" className="btn btn-primary">
<i className="fa fa-bars"></i>
<span className="sr-only">Toggle Menu</span>
</button>
</div>
<div className="p-4">
<h1>Donyaro </h1>
<ul className="list-unstyled components mb-5">
{this.state.menuItems.map(item=> {return
<li className="active">
</i>{item}
</li>
})
}
</ul>
</div>
<div class="footer">
</i>
<h6><span>Welcome, </span>Add Business
</h6>
</div>
</nav>
</div>
);
}
}
export default Sidebar;
I am using UIkit css framework with Gatsby.js
When I use OffCanvas (Nav) to go to different page next page reloads but it stucks. nothing is happening not even scroll.
This is my SideBar.jsx file
I have hosted the partial built website.You can check the problem. Go to
https://jainsons.netlify.app/aboutus
then open Sidebar and then click "Home"
import React from 'react'
import {Link} from 'gatsby'
import logo from "../images/logo.png"
import UIkit from 'uikit/dist/js/uikit.min.js'
import Icons from 'uikit/dist/js/uikit-icons.js'
function SideBar() {
UIkit.use(Icons)
return (
<React.Fragment>
<div className="uk-position-absolute">
<button
className="uk-button uk-button-small uk-button-secondary uk-margin-small-left " style={{marginTop:"27px"}} type="button" uk-toggle="target: #offcanvas-nav-primary">
<span className="" uk-icon="icon:menu;ratio:2"></span>
</button>
</div>
<div id="offcanvas-nav-primary" uk-offcanvas="mode:reveal;overlay: true">
<div className="uk-offcanvas-bar uk-flex uk-flex-column">
<ul className="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
<li className=" uk-margin-xlarge-bottom">
<Link to="/" >
<img src={logo} alt="LOGO"/>
</Link>
</li>
<li>
<Link to="/" className="uk-text-lead" activeClassName="uk-active" >
Home
</Link>
</li>
<li className="uk-nav-divider"></li>
<li className="uk-parent">
<p className="uk-text-lead">Brands</p>
<ul className="uk-nav-sub">
<li><p>RAPCA</p></li>
<li><p>POLYX</p></li>
</ul>
</li>
<li className="uk-nav-divider"></li>
<li>
<Link to="/about" className="uk-text-lead" activeClassName="uk-active" >
Home
</Link>
</li>
</ul>
</div>
</div>
</React.Fragment>
)
}
export default SideBar
I don't think it'll be to do with Gatsby Link necessarily. Maybe try switching <Link to="/"> to a regular <a href="/"> tag to see if the behaviour is the same. From looking in the dev tools on Chrome, I can see that the event listener for the menu icon click disappears after a link from within the nav has been clicked.