I am confused by this line in the documentation for redux-burger-menu:
https://negomi.github.io/redux-burger-menu/
Decorate your menu component:
// Menu.js
import {slide as Menu} from 'react-burger-menu';
import {decorator as reduxBurgerMenu} from 'redux-burger-menu';
export default reduxBurgerMenu(Menu);
The component you export from the above file can then be used just like react-burger-menu.
How do I import this component and use it just like react-burger-menu?
I have a NarrativeMenu here:
class NarrativeMenu extends React.Component {
showSettings(event) {
event.preventDefault();
}
render() {
return (
<Menu>
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
<a id="contact" className="menu-item" href="/contact">Contact</a>
<a onClick={ this.showSettings } className="menu-item--small" href="">Settings</a>
</Menu>
);
}
}
How can I use it with redux burger menu?
I also found it a bit confusing. I made it work like this:
Menu.js:
import {slide as Menu} from 'react-burger-menu';
import {decorator as reduxBurgerMenu} from 'redux-burger-menu';
const ReduxBurgerMenu = reduxBurgerMenu(Menu);
export default ReduxBurgerMenu;
ExampleMenu.js:
import React from 'react';
import ReduxBurgerMenu from './Menu';
class ExampleMenu extends React.Component {
render () {
return (
<ReduxBurgerMenu isOpen={ this.props.isOpen }>
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
<a id="contact" className="menu-item" href="/contact">Contact</a>
</ReduxBurgerMenu>
);
}
}
export default ExampleMenu;
and then use it like this:
import ExampleMenu from 'ExampleMenu'
...
render () {
return (
<div id="outer-container">
<Header />
<ExampleMenu pageWrapId={"page-wrap"} outerContainerId={"outer-container"} />
<div id="page-wrap">
...
</div>
</div>
)
}
...
To simplify Jan Caals example.
ExampleMenu.js
import React from 'react';
import {slide as Menu} from 'react-burger-menu';
import {decorator as reduxBurgerMenu} from 'redux-burger-menu';
const ReduxBurgerMenu = reduxBurgerMenu(Menu);
class ExampleMenu extends React.Component {
render () {
return (
<ReduxBurgerMenu isOpen={ this.props.isOpen }>
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
<a id="contact" className="menu-item" href="/contact">Contact</a>
</ReduxBurgerMenu>
);
}
}
export default ExampleMenu;
Related
trying to import component from components which is in src directory but it is throwing error cant find module new to react any help will be appreciated
src
- app.js
-components/create-todo.component
app.js
import React, { Component } from "react";
import { BrowserRouter as Router,Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import CreateTodo from './components/create-todo.component';
// import EditTodo from './components/edit-todo.component';
// import TodosList from './components/todos-list.component';
// import logo from "./logo.png";
class App extends Component {
render() {
return (
<Router>
<div className="container">
<nav className="navbar navbar-expand-lg navbar-light bg-light">
{/* <a class="navbar-brand" href="https://codingthesmartway.com" target="_blank">
<img src={logo} width="30" height="30" alt="CodingTheSmartWay.com" />
</a> */}
<Link to="/" className="navbar-brand">MERN-Stack Todo App</Link>
<div className="collpase navbar-collapse">
<ul className="navbar-nav mr-auto">
<li className="navbar-item">
<Link to="/" className="nav-link">Todos</Link>
</li>
<li className="navbar-item">
<Link to="/create" className="nav-link">Create Todo</Link>
</li>
</ul>
</div>
</nav>
<br/>
<Route path="/create" component={CreateTodo} />
</div>
</Router>
);
}
}
export default App;
create-component
import React, { Component } from 'react';
export default class CreateTodo extends Component {
render() {
return (
<div>
<p>Welcome to Create Todo Component!!</p>
</div>
)
}
}
Try switching the file extension from .component.js to .jsx.
So the file would be called create-todo.jsx and your import would look like this:
import CreateTodo from './components/create-todo';
Try adding an s on the directory you're trying to import from:
import CreateTodo from './components/create-todo.component';
Should be:
import CreateTodo from './components/create-todo.components';
If this doesn't work, could you please clarify your directory structure? It goes src/components/create-todo.components?
I am new to react and am using react-bootstrap-sidebar in my project.
What I want is side subbar menu something like this Report>MIS Report.
My Report
The code I am using is this:
import {Navbar, Nav, NavItem, Button, Glyphicon} from 'react-bootstrap';
import React, {Component} from 'react';
import Sidebar from 'react-bootstrap-sidebar';
export default class Example extends Component {
constructor(props) {
super(props);
this.state = {
isVisible: false,
};
}
updateModal(isVisible) {
this.state.isVisible = isVisible;
this.forceUpdate();
}
render() {
return (
<div>
<Button bsStyle="primary" onClick={ () => this.updateModal(true) }><Glyphicon glyph="menu-hamburger"/></Button>
<Sidebar side='left' isVisible={ this.state.isVisible } onHide={ () => this.updateModal(false) }>
<Nav>
<NavItem href="#">Link 1</NavItem>
<NavItem href="#">Link 2</NavItem>
<NavItem href="#">Link 3</NavItem>
<NavItem href="#">Link 4</NavItem>
</Nav>
</Sidebar>
</div>
);
}
}
How do I implement sub menus in this sidebar.
I want to hide app component content when I click on other component pages link.
Right now, when I click other links like about us, then it shows both app component and about us page component. But I want show only about us content once I click on about us page.
Also, when I define App component patch as a "/" then application keeps loading.
Below are the code
App.js
import React, { Component } from "react";
import Navigation from "./components/Navigation";
import data from "./data";
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
// data: false
};
}
render() {
return (
<div className="container">
<Navigation />
{data.map((link) => (
<div className="card mb-3" key={link.Title}>
<div className="row no-gutters">
<div className="col-md-5">
<img
src={require("./images/" + link.Img)}
className="card-img"
alt=""
/>
</div>
<div className="col-md-7">
<div className="card-body">
<h5 className="card-title">{link.Title}</h5>
<p className="card-text">{link.Desc.halfDesc}</p>
<p className="card-text">
<small className="text-muted">{link.date}</small>
</p>
<button type="button" className="btn btn-dark float-right">
Read More
</button>
</div>
</div>
</div>
<FullDescription />
</div>
))}
</div>
);
}
}
const FullDescription = (props) => (
<div className="modalbox">
<p>fsdf</p>
</div>
);
export default App;
Navigation.Js Everything is working fine only App home page content show which i don't want when i click other pages
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import Api from "./Api";
import News from "./News";
import Website from "./Website";
class Navigation extends Component {
render() {
return (
<Router>
<ul className="nav justify-content-center mb-4 navigation">
<li className="nav-item">
<Link className="nav-link" to="/Api">
Api
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/News">
News
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Website">
Website
</Link>
</li>
</ul>
<Switch>
<Route exact path="/Api" component={Api}></Route>
<Route exact path="/News" component={News}></Route>
<Route exact path="/Website" component={Website}></Route>
</Switch>
</Router>
);
}
}
export default Navigation;
For this to work you need to put content of app.js inside another component because right now it doesnt have a route to hide itself when going to other page. So you need to treat the component just like your rest components (Api.js, News.js) etc..
NewAppComponent.js
import React, { Component } from "react";
import { Link } from "react-router-dom";
class Navigation extends Component {
render() {
return (
<ul className="nav justify-content-center mb-4 navigation">
<li className="nav-item">
<Link className="nav-link" to="/Api">
Api
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/News">
News
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Website">
Website
</Link>
</li>
</ul>
);
}
}
export default Navigation;
App.js
import React, { Component } from "react";
import Navigation from "./components/Navigation";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import NewAppComponent from "./NewAppComponent";
import Api from "./Api";
import News from "./News";
import Website from "./Website";
class App extends Component {
render() {
return (
<div className="container">
<Router>
<Navigation />
<Switch>
<Route exact path="/" component={NewAppComponent}></Route>
<Route path="/Api" component={Api}></Route>
<Route path="/News" component={News}></Route>
<Route path="/Website" component={Website}></Route>
</Switch>
</Router>
</div>
);
}
}
export default App;
NewAppComponent.js
// NewAppComponent.js
import React, { Component } from "react";
import data from "./data";
class NewAppComponent extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
// data: false
};
}
render() {
return (
<div className="container">
{data.map((link) => (
<div className="card mb-3" key={link.Title}>
<div className="row no-gutters">
<div className="col-md-5">
<img src={require("./images/" + link.Img)} className="card-img" alt="" />
</div>
<div className="col-md-7">
<div className="card-body">
<h5 className="card-title">{link.Title}</h5>
<p className="card-text">{link.Desc.halfDesc}</p>
<p className="card-text">
<small className="text-muted">{link.date}</small>
</p>
<button type="button" className="btn btn-dark float-right">
Read More
</button>
</div>
</div>
</div>
<FullDescription />
</div>
))}
</div>
);
}
}
const FullDescription = (props) => (
<div className="modalbox">
<p>fsdf</p>
</div>
);
export default NewAppComponent;
In my main container the layout has this code
import React, { Component } from 'react';
import Header from '../../components/Navigation/Header/Header';
import SideBar from '../../components/Navigation/SideBar/SideBar';
class Layout extends Component {
state = {
showSideBar: true
}
sideBarToggleHandler = () => {
console.log("test");
}
render() {
return (
<div>
<Header />
<div>
<SideBar onClick={this.sideBarToggleHandler}/>
<main id="main">
{this.props.children}
</main>
</div>
</div>
)
}
}
export default Layout;
Whenever I click on any element in the side bar I want to console log test
For some reason this is not happening however if I move the onClick method to the header for example or to main it works fine
This is my sidebar:
import React from 'react';
import classes from './SideBar.module.scss';
import Logo from '../Logo/Logo'
import NavigationItems from './NavigationItems/NavigationItems'
const sideBar = (props) => {
}
return (
<div className={Classes.SideBar}>
<Logo />
<nav>
<NavigationItems />
</nav>
</div>
);
};
export default sideBar;
and this is my navigation items:
import React from 'react';
import classes from './NavigationItems.module.scss';
import Aux from '../../../../hoc/Aux';
import CollapseIcon from '../../../../assets/Images/Icons/collapse.svg'
import { library } from '#fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faHome } from '#fortawesome/free-solid-svg-icons';
import { faFileAlt } from '#fortawesome/free-solid-svg-icons';
import { faChartLine } from '#fortawesome/free-solid-svg-icons';
library.add(faHome);
library.add(faFileAlt);
library.add(faChartLine);
const navigationItems = (props) => {
return (
<Aux>
<p>CONSUMER</p>
<ul className={classes.NavigationItems}>
<li><FontAwesomeIcon className={classes.Icon1Paddig} icon="home" /> Home</li>
<li><FontAwesomeIcon className={classes.Icon2Paddig} icon="file-alt" /> Dashboard</li>
<li><FontAwesomeIcon className={classes.Icon3Paddig} icon="chart-line" /> Statistics</li>
</ul>
<div className={classes.Divider}></div>
<div className={classes.ButtonPosition}>
<button onClick={props.clicked}><img className={classes.CollapseIcon} src={CollapseIcon} alt='icon'></img>Collapse sidebar</button>
</div>
<div className={classes.Divider + ' ' + classes.DividerBottom}></div>
<p className={classes.footer}>Micheal Alfa v 1.0.0</p>
<p className={classes.footer}>Copyrights # 2019 All Rights Reserved</p>
</Aux>
);
};
export default navigationItems;
Any ideas?
Thank you
You are not doing anything with the passed onClick event. You need to put it on something, like so:
const sideBar = (props) => (
<div onClick={this.props.onClick} className={Classes.SideBar}>
<Logo />
<nav>
<NavigationItems />
</nav>
</div>
);
export default sideBar;
This will fire that event when you click on the div. Make sense?
I'm using React and React Router to build a web app. Currently, the header is is it's own component, and is loaded into the HomePage container with a Page component. I want to render a new component on click of a button in the header inside the page component
This is the mainpage container I have right now
import React from 'react';
import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3';
import Page4 from "./Page4";
import {Header} from "../components/Header";
export default class MAINHome extends React.Component {
constructor(props) {
super();
}
render() {
return (
<div>
<Header/>
<Page1/>
<Page2/>
<Page3/>
<Page4/>
</div>
);
}
}
<div id="header" className="container-fluid">
<div className="row">
<div className="col-md-4" id="logo-col">
<img src={require("../assets/LOGO.png")} alt=""/>
</div>
<div className="col-md-8 d-flex justify-content-end" id="nav-col">
<ul>
<li>
<Link to="/trees" id="trees-adopted-nav">
300+ TREES ADOPTED
</Link>
</li>
<li>
<a href="#" className="about-us">
ABOUT US
</a>
</li>
<li>
<a href="#" className="about-trees">
ABOUT TREES
</a>
</li>
<li>
<a href="#" className="contact-us">
CONTACT US
</a>
</li>
</ul>
</div>
<Route path="/trees" exact="exact" component={AdoptTrees} />
</div>
</div>
</Router>
This renders a component inside the header itself, but I want it to render instead of the entire main page itself by replacing
<div>
<Header/>
<Page1/>
<Page2/>
<Page3/>
<Page4/>
</div>