React Child and Parent Components state change on click - reactjs

Question

I am trying to make a click on a button of a child React component change the Boolean state of the child and of its parent.
The issue here is that it has to change states of both components.
Here is a link for the code I am trying to get working:
https://stackblitz.com/edit/child-to-parent-state-pass-bkmvwc?file=Child.js
The requirement is to click the hamburger button and it changes the state of the child component (the actual hamburger button) and its parent component.
Thank you!

Answer 1

I would not recommend doing what you are doing.
But, knowing nothing of your background I will only answer your question.
In parent.js you are missing the bind to this.
Use this line instead and check if this works

Answer 2

Why don't you manage the state from the parent component like:
Parent.js:
import React from 'react'
import { Link } from 'react-router-dom'
import { initializeIcons } from '#uifabric/icons';
import Hamburger from './Child'
initializeIcons();
export default class NavBar extends React.Component {
constructor(props) {
super(props);
this.state = {
opened: false
};
}
handleCounter = () => {
this.setState({ opened: !this.state.opened });
}
render() {
return (
<Hamburger
opened={this.state.opened}
handleCounter={this.handleCounter}
/>
);
}
}
Child.js
import React from 'react'
import { IconButton } from 'office-ui-fabric-react/lib/Button';
import { initializeIcons } from '#uifabric/icons';
initializeIcons();
export default class Hamburger extends React.Component {
constructor(props) {
super(props);
}
updateParent() {
this.props.handleCounter(this.state);
}
render() {
return (
<IconButton
checked={this.props.opened}
iconProps={{ iconName: (this.props.opened ? 'Cancel' : 'GlobalNavButton'), style: { fontSize: 35 } }}
className="hamburger mobile-only"
title="Open Global Navigation"
ariaLabel="Open Global Navigation"
styles={{
root: {
padding: '0',
border: 'none',
background: 'transparent !important'
}
}}
onClick={this.props.handleCounter}
/>
);
}
}
PS: I removed the comments for readability

Answer 3

You would only change the state of the parent. The child would just read the props that are passed to it.
Parent component
constructor(props){
super(props)
this.state = {
hamburgerOpen: false
}
}
handleHamburgerToggle = () => {
let { hamburgerOpen } = this.state;
this.setState({
hamburgerOpen: !hamburgerOpen
})
}
render() {
let { hamburgerOpen } = this.state;
return (
<Child
hamburgerOpen={hamburgerOpen}
handleHamburgerToggle={this.handleHamburgerToggle}
/>
)
}
Child will have access to the props passed to it. You can make the Hamburger a functional component as well since it isn't concerned about the current state, only the parent is.
hamburgerOpen and toggleHamburgerOpen
Child Component
const { handleHamburgerToggle } = this.props;
return {
<div>
<div
onClick={() => handleHamburgerToggle()}
>
Click me to toggle hamburger
</div>
</div>
}