Responsive navigation menu with React and Bootstrap - hamburger isn't working - reactjs

I created a simple navigation menu with Bootstrap. It's working fine in pure javascript, but when adapting it into react, the hamburger icon doesn't function (nothing happens on click). I installed bootstrap with
npm install --save bootstrap
And then added the bootstrap css to index.html in the public folder:
link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
My jsx is as follows:
<nav className="navbar navbar-expand-sm navbar-dark bg-dark">
<div className="container">
<button className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span className="navbar-toggler-icon"></span></button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link to="/app/portfolio" className="nav-link">PORTFOLIO</Link>
</li>
<li className="nav-item">
<Link to="/app/about" className="nav-link">ABOUT</Link>
</li>
<li className="nav-item">
<Link to="#create-head-section" className="nav-link" style={{fontStyle: 'italic'}}>Personal art</Link>
</li>
<li className="nav-item">
<Link to="#share-head-section" className="nav-link">CONTACT</Link>
</li>
</ul>
</div>
</div>
</nav>
Again, everything looks fine except that the hamburger icon is not functioning.

The bootstrap show class is used to display the collapsible menu items. So, the task is to simply add the show class conditionally on click of the hamburger icon.
Just follow these simple steps to achieve this functionality.
Add a showCollapsedMenu(the name is up to you) property with initial value of false in your state like this:
state={
showCollapsedMenu: false
}
Then declare a function like this which when called will reverse the current state:
toggleMenu = () => {
this.setState({
showCollapsedMenu: !this.state.showCollapsedMenu
})
}
The above function will be called whenever the hamburger icon is clicked. So implement the onCLick method on the hamburger icon like this:
<button
className="navbar-toggler"
type="button"
onClick={this.toggleMenu} // <=
data-toggle="collapse"
data-target="#navbarNav">
<span className="navbar-toggler-icon"></span>
</button>
Now create a const show which will conditionally add the show class depending on the state of showCollapsedMenu:
const show = (this.state.showCollapsedMenu) ? "show" : "" ;
Now finally add this show to the div with collapse navbar class like this:
<div className={"collapse navbar-collapse " + show} id="navbarNav">
Note: Mixing jQuery with React is not recommended as they both manipulate the DOM differently. While it may seem an easy solution, it might result in bigger problems.

Bootstrap events require jQuery, Popper and Bootstrap.js source. That page will also let you know which components require JS. You can include jQuery, Popper and bootstrap.js in the index.html file, where you load your bundle. Either add that, or simply check out Reactstrap, which implements Bootstrap components in React.

According to https://www.npmjs.com/package/bootstrap#whats-included, the npm version of Bootstrap doesn't include jQuery, but the navbar component needs it, so you might need to add https://www.npmjs.com/package/jquery to your dependencies.

Related

is there any help for bootstrap and react-router in reactjs

I'm new in React, and I use react-router and bootstrap version 3.4 examples section.
First example - when I run my project doesn't show my project. I will show the codes:
import React from "react"
class Header extends React.Component{
render(){
return(
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
)
}
}
export default Header
The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles.
this may help
Both and components can be used to define and design declarative navigation around an application. Within either component, we can use the “to” attribute to specify the location pathname to which the link will direct.
import { NavLink } from "react-router-dom";
<NavLink to="/" className="<any classes like>float-left">Home</NavLink>
<NavLink to="/about" className="<any classes like>float-left">About</NavLink>
here is a great example
https://medium.com/swlh/using-react-router-navlink-to-specify-the-active-element-in-a-navigation-bar-38700ffd4900

NavLink interactions with boostrap classes

I am having trouble setting up my routing using 'react-router-dom'. The problem is if I use the NavLink class, the a tag is lost and bootstrap wont display the css behavior.
What i'd like to happen is figure out a way to get the classes working like a normal a tag. Even if I have the btn btn-outline-primary, having the NavLink will interfere with the css properties.
***edit: I found the problem. If I set all routes for testing purpose to="/", every link is going to be active. So, afterall, Bootstrap is working perfectly, just have to make sure to test it once all routes are set.
<li className="nav-item">
<NavLink to='/' className="btn btn-light mr-1" href="#">
<i class="fas fa-user"></i> Perfíl
</NavLink>
</li>
try nesting the li in the Navlinks and also pass the bootstrap classes to the li and not the Navlink route. remove the href

angular-sidebarjs - sidebar not closing on button click in angularjs

I am new in angular and I have been using angular-sidebarjs in my app. I have given my code of sidebar directive below.
in my template:
<sidebarjs>
<div class="sidebar-head">Find User</div>
<nav>
<ul class="sidebar-menu">
<li ng-repeat="radius in radius">
radius.name
</li>
</ul>
</nav>
</sidebarjs>
in my home.js:
var home = angular.module('wm.home',[uiRouter,'ngSidebarJS'])
When I click on an option among the list, sidebar doesn't close and the required page loads behind. sidebar closes only when I click on the toggle button or outside the sidebar.
How to close the sidebar onclick of any of the options in the list?
You should add the attribute sidebarjs-toggle to your options, like this:
<sidebarjs>
<div class="sidebar-head">Find User</div>
<nav>
<ul class="sidebar-menu">
<li ng-repeat="radius in radius">
<a sidebarjs-toggle href="#" ng-click="listMenus()" ui-sref="users({radius_id: radius_id})" ui-sref-opts="{reload: true}">radius.name</a>
</li>
</ul>
</nav>
</sidebarjs>
Also, I think you should remove that href="#" because you are already doing the routing with the ui-sref.

Materialize-css Modal in React with React Router

Trying to have a modal come in from Materialize-css that i get from that npm but nothing is showing up. I am using React with React Router v4 as well
I currently have it set up in my nav bar and the search-bar changes with the #modal1 identifier but the modal doesn't pop up. I would really like to avoid hacky things like have a line or two of jQuery in componentDidMount just for this because if thats the only solution I'll just go back to bootstrap.
I'm trying it with the code straight from the Docs. Please help!
<div className='container'>
<div id="modalHere" className="modal">
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div className="modal-footer">
Agree
</div>
</div>
<nav>
<div className="nav-wrapper blue-grey lighten-2">
<Link to='/professionals' className="brand-logo right"><img src={pegasusIcon} alt='OurTelos logo' className="OurTelosNavbarLogo"/></Link>
<ul id="nav-mobile" className="left">
<li><Link to="/professionals/sessions">Sessions</Link></li>
<li><a className="waves-effect waves-light btn modal-trigger" href="#modalHere">Modal</a></li>
</ul>
</div>
</nav>
</div>
EDIT
I added the jquery in my index file for the modal in a script tag and my modal does pop up but not properly. Take a look. Also if I use the example with the Fixed-Footer things seem to come out and work just fine.....why
EDIT 2
Now I am having an issue that the same modals from a single exported react component will no longer show after the page has been changed by react router...

ReactBootstrap global is undefined

so I'm currently working on a project written in Flask which I added Bootstrap to. I have recently started adding some react components and I would like to have them look like the other bootstrapped components. Here is some of my code:
This is where I've included my bootstrap.js files and react.js file
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/build/react.js"></script>
<script src="/static/js/build/JSXTransformer.js"></script>
<script src="/static/js/react-bootstrap-bower/react-bootstrap.js"></script>
This html normally is rendered by bootstrap as wonderful little pager icons, but not in react:
return (
<div>
<nav>
<ul className="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
I understand I didn't put the full return, the return isn't the issue at hand, however, its the styling. I tried adding in a Pager element with the following
var Pager = ReactBootstrap.Pager;
...
//inside some html return
<Pager></Pager>
but I get the response first that ReactBootstrap is not defined. Yet I read that the ReactBootstrap global is created automatically when you include the js file. The other response is that Pager doesn't exist (obviously since ReactBootstrap was unable to return it).
So my question is, can I simply return html without the data-reactid info or somehow have it rendered by bootstrap without needing reactBootstrap? or do is there something I'm missing from my files to use reactBootstrap. Thanks in advance for the help!
I tried to reproduce it in a jsbin, but ReactBootstrap.Pager is a component, and it renders with the correct styles.
You're not loading things correctly.

Resources