react.js props and state inside multilevel components

Question

I have one app having component structure like below. Component App Main parent which loads header in all components using {this.props.children} Component Header Component Home Component Dashboard Component Data Component DataLoad

App contains Header in render passing some state variables. Home contains Dashboard which has actions to update the state variables of App to update the Header. Data contains DataLoad also from here i need to update the state variable of App to update the Header.

For example my App is like
import React from 'react';
import Header from './Header.jsx';
class App extends React.Component {
constructor(props) {
  super();
  this.state = {
                show : '1',
            }
   this.showHide = this.showHide.bind(this);
}

showHideSearch() {
    this.setState(prevState => ({
      show: prevState.show == '1' ? '0' : '1',
    }));
}
render() {
return (
    <div>
        <Header show={this.state.show}/>
        {this.props.children}
    </div>
)
}  
}

export default App;

import React from 'react';
import Dashboard from './Dashboard.jsx'
class Home extends React.Component {
constructor(props) {
  super();
  this.showHide = this.showHide.bind(this);
}
showHide() {
      tried this but not working
    //this.props.showHideSearch();
}
render() {
return (
    <div>// this props show not going to dashboard component
        <Dashboard show={this.props.show} showHide=  {this.showHide.bind(this)}/>
    </div>
)
}
}

export default Home;

check this [link](http://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children). — veetesh jain, Jan 17 '17 at 08:08
Possible duplicate of [How to pass props to {this.props.children}](http://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children) — veetesh jain, Jan 17 '17 at 08:09

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

If I am understanding your question right, you are wanting to pass your this.showHideSearch function from your App component to its the component in this.props.children - your Home component.

This is easily accomplishable using:

React.cloneElement(this.props.children, {showHideSearch: this.showHideSearch});

Put that in place of where you have this.props.children.

Source - https://stackoverflow.com/a/35102287/6621973

Edit: To update a parent's state, simply pass down a function setting the state from parent to child. There are several examples if you Google "react change parent state", for example: How to update parent's state in React?

edited May 23 '17 at 12:01

Community

1
1

answered Jan 17 '17 at 08:12

Nick Pierson

278
1
7

That is something i was trying to see how i will update one state variable form different components which is being used in main app component – Rahul Tailwal Jan 17 '17 at 08:16
To update a parent's state, simply pass down a function setting the state from parent to child. There are several examples if you Google "react change parent state", for example: http://stackoverflow.com/questions/35537229/how-to-update-parents-state-in-react – Nick Pierson Jan 17 '17 at 16:24

react.js props and state inside multilevel components

1 Answers1