Develop Reference

How to set a hamburger menu using React-Hamburger-Menu?

I am trying to make a menu that uses CSS3 to fade in and out when you click on the hamburger menu. I am using the react-hamburger-menu.
Although I can't figure out how to use the handleClick function and how to make it that when you click the menu button, or any of the links it triggers the toggle on the className.
I'm using the Gatsby react starter if that matters...
Here's what I have coded so far
import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import './Header.css'
import { HamburgerMenu } from "react-hamburger-menu";
handleClick() {
this.setState({
open: !this.state.open
});
}
const Header = ({ siteTitle }) => (
<div className="Header">
<div className="HeaderGroup">
<Link to="/" className="logo"><img src={require('../../images/logo.svg')} width="70" alt="Ryan B. Designs"/></Link>
<HamburgerMenu
isOpen={this.state.open}
menuClicked={this.handleClick.bind(this)}
width={18}
height={15}
strokeWidth={1}
rotate={0}
color='black'
borderRadius={0}
animationDuration={0.5}
/>
</div>
<div className={"MainNavigation " + (this.state.open ? 'show' : 'hidden')}>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About Me</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</div>
</div>
)
Header.propTypes = {
siteTitle: PropTypes.string,
}
Header.defaultProps = {
siteTitle: ``,
}
export default Header
What I want to happen is when I click the hamburger button, the menu fades in, and when you click the close button or one of the links, the menu fades out using CSS3.

Beside the syntax error #JaromandaX pointed out in the comment, you're using setState in a function component. As it is right now, this doesn't have a setState, it's pointing to the module itself I believe. It should be point to a React class component that has state initiated:
class MyComponent extends React.Component {
// gatsby default environment supports class properties
state = {
isOpen: false,
}
handleClick = () => this.setState({ ... }) // this is now MyComponent
render() {
return (...)
}
}
or you can use useState hook.

Reactjs: how to update state of parent from child

I am trying to update state of my parent component through child component via setState. below is my parent component:
Fulllayout
import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Header from '../components/header/header.jsx';
import Customizer from '../components/customizer/customizer';
import { Navbar, NavbarBrand, Collapse } from 'reactstrap';
export const settings = {
navbarbg: 'skin1',
sidebarbg: 'skin6',
logobg: 'skin6'
}
class Fulllayout extends React.Component {
constructor(props) {
super(props);
this.state = {
settings: settings
};
}
render() {
return (
<div id="main-wrapper">
<header data-navbarbg={this.state.settings.navbarbg}>
<Navbar expand="md" className={}></Navbar>
</header>
<div className="page-wrapper d-block"></div>
<Customizer />
</div>
);
}
}
export default Fulllayout;
in parent i have defined one constant settings which is exported. It is also given in the this.state. and in header, there is an attribute data-navbarbg={this.state.settings.navbarbg}.
I wanted to change its value dynamically. So, i have one customizer which is imported in parent as a child. Below is the child component:
customizer
import React from 'react';
import { settings } from '../../layouts/fulllayout';
import update from 'immutability-helper';
class Customizer extends React.Component {
constructor(props) {
super(props);
this.navbarbgChange = this.navbarbgChange.bind(this);
this.state = {
settings: settings
};
}
navbarbgChange(e) {
var skin = e.currentTarget.dataset.navbarbg;
var abc = update(this.state.settings, {
navbarbg: { $set: skin }
});
this.setState({ settings: abc });
}
render() {
return (
<aside className="customizer" id="customizer">
<a className="service-panel-toggle text-white"></a>
<div className="customizer-body pt-3">
<div className="mt-3 border-bottom px-3">
<ul className="theme-color mb-2">
<li><a data-navbarbg="skin1" onClick={this.navbarbgChange}></a></li>
</ul>
</div>
</div>
</aside>
);
}
}
export default Customizer;
From customizer, by clicking on color, i wanted to setState of parent to the value given in data-navbarbg attribute.
If i put this code in parent jsx file, it is working fine but for some reasons, this files should be kept separated.
So, what is missing in my code? or the whole approach is wrong? Thanks.

Is there a reason for navbarbgChange to be defined in Customizer?
You could consider moving navbarbgChange to Fulllayout instead.
That way you can do
<li><a data-navbarbg="skin1" onClick={this.props.navbarbgChange}></a></li>
This will ensure that the Fulllayout has the updated background in its state. This also ensures that there is good separation of concerns since settings is defined in the parent and not the child component

In react you can always pass methods from parent to child. Let's write method in the parent to change the state of the parent from the child like this.
class Fulllayout extends React.Component {
constructor(props) {
super(props);
this.state = {
settings: settings
};
}
// This will be passed to the child component
changeForCustomizerState() {
this.setState({
settings: abc
});
}
changeForHeaderState() {
this.setState({
settings: abc
});
}
render() {
return (
<div id="main-wrapper">
<header chageNavbarbg={this.changeForHeaderState}>
<Navbar expand="md" className={}></Navbar>
</header>
<div className="page-wrapper d-block"></div>
<Customizer chageNavbarbg={this.changeForCustomizerState} />
</div>
);
}
}
Then onClick on the child just call the parent method from the child which is passed from the parent.
render() {
return (
<aside className="customizer" id="customizer">
<a className="service-panel-toggle text-white"></a>
<div className="customizer-body pt-3">
<div className="mt-3 border-bottom px-3">
<ul className="theme-color mb-2">
<li><a data-navbarbg="skin1" onClick={this.props.chageNavbarbg}></a></li>
</ul>
</div>
</div>
</aside>
);
}

The state update can be done in Parent from Child using callbacks. Check below code for better understanding
Fulllayout:
updateState = (skin) => {
this.setState({
settings.navbarbg: skin
});
}
render(){
return(
<div>
<Customizer updateState={this.updateState}
</div>
);
}
And in your customizer
navbarbgChange(e){
const skin = e.currentTarget.dataset.navbarbg;
this.props.updateState(skin);
}
OR
Fulllayout:
updateState = (e) => {
const skin = e.currentTarget.dataset.navbarbg;
this.setState({
settings.navbarbg: skin
});
}
render(){
return(
<div>
<Customizer updateState={this.updateState}
</div>
);
}
Customizer: directly pass parent function to onClick
<li><a data-navbarbg="skin1" onClick={this.props.updateState}></a></li>
Also stop using var, and start using let and const mostly. ECMASCRIPT itself argues to avoid using var because of its window scope.

Passing data from child to parent in React

Hello I am trying to implement a very simple functionality that would update my state based on the value passed into a function. The function is declared in my parent component, is passed to my child component via props and it is being called on a child component.
I keep getting this error on the console:
Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.
Here is my code:
Parent component
import React, {Component } from "react";
import Sidebar from './Sidebar';
import Content from './Content';
class Tabs extends Component {
constructor(props){
super(props);
this.state={
message:'Select a name from the tabs menu'
};
this.handleName = this.handleName.bind(this);
}
componentWillMount () {
if ('pluginLoaded' in window) {
(window).pluginLoaded('tabs', function (port: any, context: any) {
// Future work should interact with the message channel here
});
}
}
handleName(value){
if (value === 'Vanessa'){
console.log(`${value} in da house `)
this.setState({
message: 'Vanessa means "butterfly"'
})
}
}
render() {
return (
<div className="Tabs">
<Sidebar
handleName = {this.handleName}
/>
<Content
message = {this.state.message}
/>
</div>
)
}
}
export default Tabs;
Child component
import React from 'react';
const Sidebar = (props) =>{
let Vanessa= 'Vanessa';
let Paola = 'Paola';
return(
<div className="Sidebar">
<h1>Tabs</h1>
<ul>
<li><a onClick={props.handleName(Vanessa)}>Vanessa</a></li>
<li><a onClick={props.handleName(Paola)}>Paola</a></li>
</ul>
</div>
)
}
export default Sidebar;

Instead of:
<li><a onClick={props.handleName(Vanessa)}>Vanessa</a></li>
try:
<li><a onClick={() => props.handleName(Vanessa)}>Vanessa</a></li>

How to toggle elements with a button press in React?

I have searched for 3 freaking days to find out how to toggle my mobile nav button to toggle my mobile menu. I am new to React and could do this easily with jQuery but I don't want to use jQuery. I have line for line copied an example that I found on how to show or hide an element. I can not get it to work. Any help would be much appreciated. I am using styled-components with React.
Button sub-component:
import React, { Component } from 'react';
class MenuButton extends Component {
render() {
return (
<Button onClick={this.props.toggleMenu}>
<Menu></Menu>
</Button>
)
}
}
export default MenuButton;
Menu sub-component:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Menu extends Component {
render() {
return (
<OffCanvasMenu>
<Title>Menu</Title>
<Nav>
<NavLinks><Link to='/'>Home</Link></NavLinks>
<NavLinks><Link to='/about'>About</Link></NavLinks>
<NavLinks><Link to='/interactive'>Interactive</Link></NavLinks>
<NavLinks><Link to='/ideas'>Ideas</Link></NavLinks>
<NavLinks><Link to='/contact'>Contact</Link></NavLinks>
</Nav>
</OffCanvasMenu>
)
}
}
export default Menu;
Menu Container component with all the state:
import React, { Component } from 'react';
import Menu from './Menu';
import MenuButton from './MenuButton';
class MenuContainer extends Component {
constructor(props) {
super(props);
this.state = {
active: false
}
this.toggleMenu = this.toggleMenu.bind(this);
}
toggleMenu() {
const { active } = this.state;
this.setState({
//toggle value of `active`
active: !active
});
}
render() {
return (
<div>
<MenuButton onClick={this.toggleMenu}/>
{this.state.active && <Menu/>}
</div>
)
}
}
export default MenuContainer;
I can see a checkbox in ReactDev tools that shows MenuContainer has state but when the button is clicked it does not toggle the state.

onClick is handled by MenuButton component which in turns invokes toggleMenu function passed as a property. I would pass toggleMenu as property of MenuButton:
<MenuButton toggleMenu={this.toggleMenu} />

ReactJS: Separating Components Best Practices

So, I have a react-bootstrap nav and I want to have one of the nav items open and close a bootstrap modal component.
I have this working with this:
import React, { Component, render } from 'react';
import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap';
export default class NavigationBar extends Component {
constructor() {
super();
this.state = {
showModal: false
}
}
close() { this.setState({ showModal: false }); }
open() { this.setState({ showModal: true }); }
render() {
return (
<div>
<Navbar>
...entire navbar...
</Navbar>
<Modal show={this.state.showModal} onHide={() => this.close()}>
...entire modal... which would be nice to put if a different file
</Modal>
</div>
); } }
Ideally, I would like to put the modal in a different component file and import it in, but when I do, I'm lost on how to translate the navbar open and close.
What is the best practice for combining components while maintaining their state across files?
Thanks!

A good way to think about it is containers vs presentational components. Containers hold your state and most of your logic. Presentational components take in inputs (props) and render html (jsx) [and do little else].
So, you could make your own Modal component that takes in the methods to call on close and one on whether or not it's shown. It could even be a stateless component - if it's just props + jsx, no need for a full class structure:
import React, { PropTypes } from 'react';
const MyModal = ({ show, onHide}) => (
<Modal show={show} onHide={onHide}>
// ...entire modal...
</Modal>
);
// displayName and propTypes are always good to have
MyModal.displayName = 'MyModal';
MyModal.propTypes = {
show: PropTypes.bool.isRequired,
onHide: PropTypes.func.isRequired,
};
export default MyModal;
then to use it, you will need to make sure to bind your methods so they're called in the right context:
class NavigationBar extends Component {
constructor() {
super();
this.state = {
showModal: false
};
// this is the important binding
this.close = this.close.bind(this);
this.open = this.open.bind(this);
}
close() { this.setState({ showModal: false }); }
open() { this.setState({ showModal: true }); }
render() {
return (
<div>
<Navbar>
// ...entire navbar...
</Navbar>
<MyModal
show={this.state.showModal}
onHide={this.close}
>
// child content if needed (unless it's all defined in MyModal)
</Modal>
</div>
);
}
}

You can wrap your react-bootstrap Modal with your content into your own custom component like so:
import React from 'react';
import { Modal } from 'react-bootstrap';
const NewModal = ({show, onHide}) => {
<Modal show={show} onHide={onHide}>
Modal content in here
</Modal>
};
export default NewModal;
And then import that modal from your component file
import Modal from 'components/modal' // Import your new modal's default export