Develop Reference

Refresh page to update link active status based on window.location.pathname

I'm starting to learn ReactJS and I have created a small app with 3 screens: home, about & users. I am using bootstrap for styles.
I have the following logic active={window.location.pathname === "/about"} for each link to pass in a boolean to determine if it the active page or not.
When I click the links it loads the page I need however the style doesn't update to reflect that the link is active however if I refresh the page it updates the style.
From what I've read online I can do something with states to reload the page to update the style etc but I'm not sure how to actually implement this.
Any help would be greatly appreciated.
App.js
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
import './App.css';
import Navigation from './components/navigation';
import Home from './views/home';
import Users from './views/users';
import About from './views/about';
export default class App extends Component {
render(){
return (
<div className="App">
<Router>
<Navigation></Navigation>
<Switch>
<Route path="/about"><About /></Route>
<Route path="/users"><Users /></Route>
<Route path="/"><Home /></Route>
</Switch>
</Router>
</div>
);
}
}
Navigation.js
import React, { Component, useState } from 'react';
import NavigationItem from './navigationItem';
export default class Navigation extends Component {
render(){
return(
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<NavigationItem active={window.location.pathname === "/"} path="/" content="Home"></NavigationItem>
<NavigationItem active={window.location.pathname === "/about"} path="/about" content="About"></NavigationItem>
<NavigationItem active={window.location.pathname === "/users"} path="/users" content="Users"></NavigationItem>
</ul>
</div>
</div>
</nav>
</div>
);
}
}
NavigationItem.js
import React, { Component } from 'react';
import {Link} from "react-router-dom";
export default class NavigationItem extends Component {
render(){
if(this.props.active){
return(
<li class="nav-item">
<Link class="nav-link active" to={this.props.path}>{this.props.content}</Link>
</li>
);
} else {
return(
<li class="nav-item">
<Link class="nav-link" to={this.props.path}>{this.props.content}</Link>
</li>
);
}
}
}

There's another React Router component called NavLink that has an activeClassName attribute that you may find useful.
I use it like this:
<li>
<NavLink
activeClassName={styles.active}
to="/path"
>Route path
</NavLink>
</li>
where active is the class I bring in from my CSS module.

how to use data-target and data-toggle in Reactjs?

I was converting a static HTML site which uses bootstrap to React.js
Here there are several divs which do open only on data-target and data-toggle.
<div className="card-header" id="headingFive">
<h5 className="mb-0">
<button
className="btn btn-link"
type="button"
data-toggle="collapse"
data-target="#collapseFive"
aria-expanded="true"
aria-controls="collapseOne">
Site Wide Events
</button>
</h5>
</div>
<div
id="collapseFive"
className="collapse show"
aria-labelledby="headingFive"
data-parent="#accordionThree">
<div className="card-body">
<div className="row">
<div className="col wall">
<h4 className="text-center">12</h4>
<p className="text-center">Target</p>
</div>
<div className="col">
<h4 className="text-center">13</h4>
<p className="text-center">Actual</p>
</div>
</div>
</div>
</div>
I don't want to use any other npmmodule for the same.
I tried this but was not able to solve.
componentDidUpdate() {
$('.collapse').bootstrapToggle();
}

Bootstrap 5 (update 2020)
jQuery is no longer required so Bootstrap 5 is easier to use in React. Use the new namespaced data-bs- attributes as explained here or, with React's useEffect useState hooks as explained in this answer.
Bootstrap 4 (original question)
If you don't want to use jQuery or react-bootstrap, you can create a method to toggle the show class on the collapsing Navbar like this...
class Navbar extends React.Component {
constructor(props) {
super(props);
this.state = { showNav: true };
this.toggleNav = this.toggleNav.bind(this);
}
toggleNav() {
this.setState({
showNav: !this.state.showNav
})
}
render() {
const { showNav } = this.state
return (
<div className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" onClick={this.toggleNav}>
<span className="navbar-toggler-icon"></span>
</button>
<div className={(showNav ? 'show' : '') + ' collapse navbar-collapse'}>
<ul className="navbar-nav mr-auto">
<li className="nav-item">
<a className="nav-link" href="#">Link</a>
</li>
...
</ul>
</div>
</div>
);
}
}
Example with Navbar Collapse
Example with Collapse

// Import the following in your App.js
import 'jquery/dist/jquery.min.js'; // Have to install and import jQuery because of bootstrap modal's dependency
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
Bootstrap dependency https://getbootstrap.com/docs/4.0/getting-started/introduction/#js
Note: I am assuming that your structuring is correct.

Change data-toggle to data-bs-toggle and data-target to data-bs-target. Just managed to find this out myself after looking for ages and not finding a solution anywhere!

Use the new namespaced data-bs- attributes
eg.
<button className='btn btn-outline-info btn-block' data-bs-toggle='modal' data-bs-target='#add'> <i className='fas fa-plus'>Add</i> </button>

I'm using react bootstrap modal in my component but it does not open by onClick event call in another component

I'm using react bootstrap modal in my component, but it does not open by onClick event call in another component. how to resolve this problem?
this is my code
import React, { Component } from 'react';
import classes from '../../Custom.css';
import {Button} from 'reactstrap';
//import ModalCart from '../../ModalCart';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
//import 'react-bootstrap';
class Navi extends Component {`enter code here`
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
<header>
<div className="navbar fixed-top navbar-dark bg-primary box-shadow">
<div className="container d-flex justify-content-between">
<a href="" className="navbar-brand d-flex align-items-center">
<strong><i className="fas fa-tags"></i> Products</strong>
</a>
<Button color="danger" onClick={this.toggle} className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader"
aria-expanded="false" aria-label="Toggle navigation">
<span className="glyphicon glyphicon-shopping-cart" data-toggle="modal" data-target="#exampleModal">
<i className="fas fa-shopping-cart"></i>
<span className={classes.counter}>
Bag : {this.props.noItems} </span>
<span className={classes.counter}>
SUBTOTAL : <span>$</span> {this.props.total.toFixed(2)}
</span>
</span>
{this.props.buttonLabel}</Button>
</div>
</div>
</header>
);
}
}
export default Navi;
this is second component where to call toggle button and my modal exit there-----
import React, { Component } from 'react';
import ShoppingCart from './ShoppingCart';
import classes from '../src/Custom.css';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
//import Aux from '../src/Aux';
class ModalCart extends Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
console.log(this.props.cart);
return (
<div>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle} className={classes.modalheader}>Shopping Cart</ModalHeader>
<ModalBody className="">
<div className="modal-body">
<ShoppingCart
cart={this.props.cart}
onRemove={this.props.onRemove}
checkOut={this.props.checkOut}
tot={this.props.total}
/>
</div>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default ModalCart;
Both of the component are displayed here plz check and help it out why it does not working thanks .......it is a mind stuck procedure form help me out from this condition,
I'm using react bootstrap modal in my component but it does not open by onClick event call in another component...
can any body knows about it plz mention hem/ her their for help me out from this problem
all two components and their code i place here if i'm done any mistake highlight it resolve this issue

It looks like you are not importing NavbarToggler.
import { NavbarToggler} from reactstrap;
in render() it will look like this
<NavbarToggler onClick={this.toggle} />

Django/ReactJS how to add django urls as props?

Keep in mind that I am completely fresh with react/django and I need all the help I can get.
I want to create a Navbar component in my application with React. The problem is that the navbar has links to other parts of the application.
What I am trying to do is to pass an array with all the links as props to my navbar component. But how can I get the links in javascript dynamically?
Right now I have this:
index.js:
let navbarUrls = [
{key: 0, url: "{% url 'main:index' %}"}
];
ReactDOM.render(<Navbar urls={navbarUrls} />, document.getElementById('navbar'));
Navbar.js:
import React, {Component} from 'react';
class Navbar extends Component {
render() {
return (
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
{this.props.urls.map(url => (
<a class="navbar-brand" key={url.key} href={url.url}>Main Page</a>
))}
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
</ul>
<div class="navbar-brand">
<div id="current-time">
</div>
</div>
</div>
</nav>
)
}
}
export default Navbar
While the elements are created, the links are of course not since it does not recognize twig... Maybe I am doing this completely wrong? Can someone direct me to the right way??

I am working with React and Django. I have faced a similar type of issue.
const navbarUrls = [
{title: 'TAB-1', path: ''},
{title: 'TAB-2', path: 'tab2'},
{title: 'TAB-2', path: 'tab3'},
];
Lat's Assume these are you links
Now Create a navbar component.
import React, {Component} from 'react';
import {Link} from 'react-router-dom'; // install react-router and react-router-dom version 4.x
class Navbar extends Component {
render() {
return (
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
{this.props.navbarUrls.map(link => (
<Link to={link.path}>{link.title}</Link>
))}
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
</ul>
<div class="navbar-brand">
<div id="current-time">
</div>
</div>
</div>
</nav>
)
}
}
export default Navbar
Now your index.jsx
import * as React from 'react';
import * as ReactDOM 'react-dom';
import {Route, HashRouter, Switch, Redirect} from 'react-router-dom';
import Navbar from 'your-path';
ReactDOM.render(
<HashRouter> // you can use BrowserRoute as well.
<Navbar urls={navbarUrls} />
<Switch>
<Route extact path="/" component={YourComponent1}/>
<Route path="/tab2" component={YourComponent2}/>
<Route path="/tab2" component={YourComponent2}/>
</Switch>
</HashRouter>,
document.getElementById('app')); //id from your main html page.
Please read the doc of react-router https://github.com/ReactTraining/react-router if you are not familiar with it.

How to import dropdown with autocomplete in the navbar

Im really new in the react and may be my code is very wrong, but how can create a dropdown with autocomplete in the navbar with bootstrap in React JS.
I read too much examples but my code never run..
I try to create dropdown with create-select but I dont know exactly how..
My code:
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
import PropTypes from 'prop-types';
import createClass from 'create-react-class';
export default class Header extends Component {
var ValuesAsBooleansField = createClass({
displayName: 'ValuesAsBooleansField',
propTypes: {
label: PropTypes.string
},
getInitialState () {
return {
options: [
{ value: true, label: 'Yes' },
{ value: false, label: 'No' }
],
value: null
};
},
onChange(value) {
this.setState({ value });
console.log('Boolean Select value changed to', value);
},
render () {
return (
<div className="section">
<h3 className="section-heading">{this.props.label} (Source)</h3>
<Select
onChange={this.onChange}
options={this.state.options}
simpleValue
value={this.state.value}
/>
<div className="hint">This example uses simple boolean values</div>
</div>
);
}
});
module.exports = ValuesAsBooleansField;
render() {
return (
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse ">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">WeatherGraph</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Начало <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Времето</a>
</li>
</ul>
</div>
</nav>
);
}
}

You have mixed up the Es5 and Es6 coding style. Just update your code and it's working fine now.
import React, { Component } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
export default class ValuesAsBooleansField extends Component {
constructor(props){
super(props);
this.state = {
options: [
{ value: true, label: 'Yes' },
{ value: false, label: 'No' }
],
value: null
}
this.onChange = this.onChange.bind(this);
}
onChange(event) {
this.setState({value: event.value});
console.log('Boolean Select value changed to', event.value);
}
render () {
return (
<div className="section">
<h3 className="section-heading">{this.props.label} (Source)</h3>
<Select
onChange={this.onChange}
options={this.state.options}
value={this.state.value}
/>
<div className="hint">This example uses simple boolean values</div>
</div>
);
}
}
**************** Paste this code in Header.js file *************
import React, { Component } from 'react';
import ValuesAsBooleansField from './ValuesAsBooleansField';
export default class Header extends Component {
render() {
return (
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse ">
<button class="navbar-toggler navbar-toggler-right"
type="button" data-toggle="collapse"
data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ValuesAsBooleansField />
<a class="navbar-brand" >WeatherGraph</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link">Начало <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link">Времето</a>
</li>
</ul>
</div>
</nav>
);
}
}