Develop Reference

React Responsive Navbar and Slider Menu - issue with translateX

I'm trying to create a responsive navbar with a slider menu. I got everything working the way I want it to except for when maximizing the window (after closing the slide menu).
menu slider //
Regular Responsive Nav {maximized window result after leaving menu slider open } //
Responsive Nav {maximized window result after menu slider closed
import "./App.css";
import React, { useState } from "react";
import { IconContext } from "react-icons";
import { GiHamburgerMenu } from "react-icons/gi";
import ProfileButtons from "./components/ProfileButtons";
function App() {
let [isMenuOpen, setIsMenuOpen] = useState(false);
let [menu, setMenu] = useState("translateX(0%)");
function openMenu() {
setIsMenuOpen(!isMenuOpen);
if (isMenuOpen === true) {
setMenu("translateX(0%)");
} else {
setMenu("translateX(-100%)");
}
}
return (
<div className='container'>
<nav className='navigation'>
<div className='navburger'>
<IconContext.Provider
value={{
color: "white",
size: "1.2em",
className: "global-class-name",
}}
>
<GiHamburgerMenu onClick={openMenu} />
</IconContext.Provider>
</div>
<div className='brand'>
<h2>Chubbini</h2>
</div>
<ul className='nav-links' style={{ transform: menu }}>
<li>
<a href='/a'>About</a>
</li>
<li>
<a href='/a'>Product</a>
</li>
<li>
<a href='/a'>Inquiries</a>
</li>
<li>
<a href='/a'>FAQ</a>
</li>
<ProfileButtons />
</ul>
</nav>
</div>
);
}
export default App;
I understand the problem, it's just I'm not sure how to reach my conclusion...unless there's an easier way or I have to not useState...
Thanks for helping!

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?

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} />

How to create a Component on Click React

I'm relatively new to React and I am trying to create a web application that creates the Rnd component when I click a button. When I click the button I can only get it to create one Rnd component even though it still registers all the clicks. Any help would be great.
import { Meteor } from 'meteor/meteor';
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-dom';
import Rnd from 'react-rnd';
export default class App extends React.Component {
renderWidget() {
console.log('I was clicked');
const widget = React.createElement(Rnd, {default: {x: 0, y: 0, width: 320, height: 200}, className: 'box'}, React.createElement('p', {}, this.state.text));
ReactDOM.render(
widget,
document.getElementById('widget')
);
}
render () {
return (
<div>
<section className='hero is-dark'>
<div className='hero-body'>
<div className='container'>
<h1 className='title'>
Dashboard
</h1>
<h2 className='subtitle'>
At A Glance Data
</h2>
</div>
</div>
</section>
<section className='section'>
<div className='container has-text-right'>
<h2 className='subtitle'>
Create New Widget
</h2>
<button className='button is-dark is-outlined' onClick={this.renderWidget.bind(this)}>
<span className='icon'>
<i className='fas fa-plus'></i>
</span>
</button>
</div>
<div id='widget'>
</div>
</section>
</div>
);
}
}

Here's one way you could go about doing what you want:
import React from "react";
import { render } from "react-dom";
import Rnd from "react-rnd";
const Widget = () => <p>Hello World</p>;
export default class App extends React.Component {
constructor() {
super();
this.state = {
components: [],
text: "Hello to you"
};
}
renderWidget() {
console.log("I was clicked");
const newComponents = [...this.state.components, Widget];
this.setState({
components: newComponents
});
}
render() {
const { components } = this.state;
return (
<div>
<section className="hero is-dark">
<div className="hero-body">
<div className="container">
<h1 className="title">Dashboard</h1>
<h2 className="subtitle">At A Glance Data</h2>
</div>
</div>
</section>
<section className="section">
<div className="container has-text-right">
<h2 className="subtitle">Create New Widget</h2>
<button
className="button is-dark is-outlined"
onClick={this.renderWidget.bind(this)}
>
<span className="icon">
<i className="fas fa-plus" />
Click me
</span>
</button>
</div>
<div>
{components.length !== 0 &&
components.map((Widget, i) => <Widget key={i} />)}
</div>
</section>
</div>
);
}
}
render(<App />, document.getElementById("widget"));

I don't have possibility to run your code but at quick glance I would probably not use ReactDOM.render to render new component every time the button is clicked. Instead I'd add array e.g. "generatedComponents" to the App-component's state and every time you click the button, it would add a new component to that array. Then you render the components in that array at the App-components render method.
Also I wouldn't use variable type const in the renderWidget-function, but instead let or var.

react / redux burger menu cannot open

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;