React how to pass an state to another component - reactjs

Question

Hello i split my app and would like to pass the state from my <button />
to <menu /> I'm simply trying to do is toggle a function with an onClick.
So the Button.js file will have 1 buttons when clicked will toggle the states to visible or invisible. The menu component Menu.js will need know about these state changes so they can toggle the function and will show the menu
Button component
import React, { PureComponent } from 'react';
import CSSTransitionGroup from 'react-addons-css-transition-group';
import { themr } from 'react-css-themr';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import localStyles from './NavButton.scss';
#themr('NavButton', localStyles)
export default class NavButton extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false,
};
this.toggleMenu = this.toggleMenu.bind(this);
}
toggleMenu() {
this.setState({
visible: !this.state.visible
})
console.log('toggle');
}
render() {
const {theme } = this.props;
return (
<div className={theme['nav-button']} onClick={this.toggleMenu}>
<span></span>
<span></span>
</div>
);
}
}
Menu
import React, { PureComponent } from 'react';
import CSSTransitionGroup from 'react-addons-css-transition-group';
import { themr } from 'react-css-themr';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import localStyles from './Menu.scss';
import { NavButton } from '../../components';
#themr('Menu', localStyles)
export default class Menu extends React.Component {
render() {
return (
<div className="menu-wrapper">
<CSSTransitionGroup
transitionName="menu"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}>
{this.state.visible &&
<Menus alignment="right">
<MenuItem hash="first-page">First Page</MenuItem>
<MenuItem hash="second-page">Second Page</MenuItem>
<MenuItem hash="third-page">Third Page</MenuItem>
</Menus>}
</CSSTransitionGroup>
</div>
);
}
}
const Menus = ({alignment, children, theme }) => (
<div className="menu">
<div className={alignment}>{children}</div>
</div>
);

Answer 1

Although you have imported Button component to Menu, you are not using it, Also what you should do is keep the state visible in the menu component and communicate to Menu from Button component like
export default class Menu extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false,
};
this.toggleMenu = this.toggleMenu.bind(this);
}
toggleMenu() {
this.setState({
visible: !this.state.visible
})
console.log('toggle');
}
render() {
return (
<NavButton toggleMenu={this.toggleMenu}/>
<div className="menu-wrapper">
<CSSTransitionGroup
transitionName="menu"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}>
{this.state.visible &&
<Menus alignment="right">
<MenuItem hash="first-page">First Page</MenuItem>
<MenuItem hash="second-page">Second Page</MenuItem>
<MenuItem hash="third-page">Third Page</MenuItem>
</Menus>}
</CSSTransitionGroup>
</div>
);
}
}
const Menus = ({alignment, children, theme }) => (
<div className="menu">
<div className={alignment}>{children}</div>
</div>
);
Now you NavButton will be like
export default class NavButton extends React.Component {
render() {
const {theme } = this.props;
return (
<div className={theme['nav-button']} onClick={this.props.toggleMenu}>
<span></span>
<span></span>
</div>
);
}
}

Answer 2

It's better to maintain the state of an application at the top most component, so it kinda governs the brains of the app.
If you moved the state into the Menu, you can pass the onClick callback into the Button e.g.
Menu.js
<NavButton toggleClick={this.handleClick} />
Then you can move the State information into the Menu as well as the handleClick function.
This allows the Button to be stateless:
const NavButton = ({theme, toggleClick}) => (
<div className={theme['nav-button']} onClick={toggleMenu}>
<span></span>
<span></span>
</div>
);