react / redux burger menu cannot open - javascript

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

react cant resolve module when importing component

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?

React-bootstrap sidebar

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.

React Router hide App content when click other pages link

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;

onClick not invoked when clicking on sidebar

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?

Render component in different container on button click

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>

Categories

Resources