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.
Related
Whenever i clicked on button url is change but content doesn't change and one more thing if i use <a> tag in exchange of <Link> tag then obviously page loading but content also load and update
but using <Link> tag it is not load data but url value is update so, please give me a solution for this
App.js
import "./App.css";
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import Home from "./component/pages/Home";
import Contect from "./component/pages/Contect";
import About from "./component/pages/About";
import Navbar from "./component/layout/Navbar";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import React from "react";
function App() {
return (
<Router>
<Navbar title="title1" />
<Switch>
<Route exact path="/Contect" component={Contect}></Route>
<Route exact path="/" component={Home}></Route>
<Route exact path="/About" component={About}></Route>
</Switch>
</Router>
);
}
export default App;
Navbar.js
import React from "react";
import { Link } from "react-router-dom";
import {} from "react-router-dom";
const Navbar = (props) => {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<div className="container">
<Link class="navbar-brand bg-light" to="/contect">
{props.title}
</Link>
<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">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<Link class="nav-link bg-light" to="/">
Home
</Link>
</li>
<li class="nav-item active">
<Link class="nav-link bg-light" to="/About">
About
</Link>
</li>
</ul>
</div>
</div>
</nav>
);
};
export default Navbar;
Home.js
import React from "react";
const Home = () => {
return (
<>
<div className="container">
<div className="py-4">
<h1> Home page </h1>
</div>
</div>
</>
);
};
export default Home;
About.js and Contect.js is same as Home.js
<Router>
<Navbar title="title1" />
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/Contect" component={Contect}/>
<Route path="/About" component={About}/>
</Switch>
</Router>
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.
application.js (Entry point for webpack)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(<App />, document.getElementById('app'))
});
App.jsx
import React from 'react'
import {
BrowserRouter as Router,
Switch,
Route
} from 'react-router-dom'
import Navbar from './components/Navbar'
import LandingPage from './components/landingPage'
import Clients from './components/Clients'
class App extends React.Component {
render(){
return (
<Router>
<div>
<Navbar />
<Switch>
<div className="container">
<Route exact path="/app" component={LandingPage} />
<Route exact path="/app/clients" component={Clients} />
</div>
</Switch>
</div>
</Router>
)
}
}
export default App
components/LandingPage.jsx
import React from 'react';
const LandingPage = (props) =>(
<div>
<h1>Hello World</h1>
</div>
)
export default LandingPage
components/Clients.jsx
import React from 'react';
class Clients extends React.Component {
render(props) {
return(
<div id="clients" className="clients">
<div className="row">
Clients!
</div>
</div>
)
}
}
export default Clients
components/Navbar.jsx
import React from 'react'
import {Link} from 'react-router-dom';
const Navbar = (props) => (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li><Link to="/app/clients">GOTO CLIENTS</Link></li>
</ul>
</div>
</nav>
)
export default Navbar
Error in console log:
Warning: React does not recognize the computedMatch prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase computedmatch instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by App)
in Switch (created by App)
in div (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App
I read in various other stack posts that this is a floating prop error when passing props around half-hazardly. However I am not passing any props here and am confused as to why this error is thrown. The app and components render fine too.
Any suggestion?
In your App.jsx, you are specifying the Switch logic like this:
<Switch>
<div className="container">
<Route exact path="/app" component={LandingPage} />
<Route exact path="/app/clients" component={Clients} />
</div>
</Switch>
However, a Switch component only expects Route as its children. Remove the <div className="container"> part and it should resolve this error message.
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>
);
}
}
I'm trying to make a responsive navbar.
In desktop shows the NavItems in the NavBar, but in small devices shows the sandwich icon and when we click it should show the same NavItems.
However, when I click on the button, nothing happens.
I was making an adaption of this tutorial:
https://www.youtube.com/watch?v=oUKJA6B1Xr4
The view look like this:
small devices version
desktop version
My NavBar.js
import React, {Component} from 'react';
import NavItems from "./NavItems";
class NavBar extends Component {
render() {
return (
<div>
<nav className="navbar navbar-default panel-app">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse"
data-target="#nav-collapse">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="#">Hoje para jantar</a>
</div>
<div className="collapse navbar-collapse" id="nav-collapse">
<NavItems className="nav navbar-nav" data-toggle="collapse" data-target=".in" href=""></NavItems>
</div>
</nav>
</div>
);
}
}
export default NavBar;
My NavItems.js
import React, {Component} from 'react';
class NavItems extends Component {
constructor(props) {
super(props);
}
render() {
return (
<ul>
<li className="nav navbar-brand">Receitas</li>
<li className="nav navbar-brand">Por categoria</li>
</ul>
);
}
}
export default NavItems;
I forgot to put the jquery link in the index.html file.
Now it works :)