Geek Answers Handbook

React - how to pass state to another component

I am trying to figure out how to notify another component of a state change. Let's say I have 3 components - App.jsx, Header.jsx and SidebarPush.jsx, and all I'm just trying to do is switch the class using onClick.

Thus, the Header.jsx file will have 2 buttons when pressed to switch the states to true or false. The remaining 2 components of App.jsx and Header.jsx should be aware of these state changes so that they can switch the class when these states change.

App.jsx

import React from 'react'; import Header from 'Header'; import classNames from "classnames"; import SidebarPush from 'SidebarPush'; import PageWrapper from 'PageWrapper'; var MainWrapper = React.createClass({ render: function() { return ( <div className={classNames({ 'wrapper': false, 'SidebarPush-collapsed': !this.state.sidbarPushCollapsed })}> <Header/> <SidebarPush/> <PageWrapper> {this.props.children} </PageWrapper> </div> ); } }); module.exports = MainWrapper;

Header.jsx

 import React from 'react'; import ReactDom from 'react-dom'; class Header extends React.Component { constructor() { super(); this.state = { sidbarPushCollapsed: false, profileCollapsed: false }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState({ sidbarPushCollapsed: !this.state.sidbarPushCollapsed, profileCollapsed: !this.state.profileCollapsed }); } render() { return ( <header id="header"> <ul> <li> <button type="button" id="sidbarPush" onClick={this.handleClick} profile={this.state.profileCollapsed}> <i className="fa fa-bars"></i> </button> </li> <li> <button type="button" id="profile" onClick={this.handleClick}> <i className="icon-user"></i> </button> </li> </ul> <ul> <li> <button id="sidbarOverlay" onClick={this.handleClick}> <i className="fa fa-indent"></i> </button> </li> </ul> </header> ); } }; module.exports = Header;

SidebarPush.jsx

 import React from 'react'; import ReactDom from 'react-dom'; import classNames from "classnames"; class SidebarPush extends React.Component { render() { return ( <aside className="sidebarPush"> <div className={classNames({ 'sidebar-profile': true, 'hidden': !this.state.pagesCollapsed })}> .... </div> <nav className="sidebarNav"> .... </nav> </aside> ); } } export default SidebarPush;
+6
source share
2 answers

Move all your state and the handleClick function from Header to your MainWrapper component.

Then pass the values ​​as props for all components that need to be granted access to this function.

 class MainWrapper extends React.Component { constructor() { super(); this.state = { sidbarPushCollapsed: false, profileCollapsed: false }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState({ sidbarPushCollapsed: !this.state.sidbarPushCollapsed, profileCollapsed: !this.state.profileCollapsed }); } render() { return ( //... <Header handleClick={this.handleClick} sidbarPushCollapsed={this.state.sidbarPushCollapsed} profileCollapsed={this.state.profileCollapsed} /> );

Then in the Header () rendering method, you should use this.props :

 <button type="button" id="sidbarPush" onClick={this.props.handleClick} profile={this.props.profileCollapsed}>
+22
source

For the question:

 what does this line this.handleClick = this.handleClick.bind(this);

This article explains: https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56 4. Binding in the constructor

0
source

More articles:


All Articles