How to change parent-component style element according to its child-component state?

5
votes

I'm trying to figure out how to set style to parent component while child component state change
consider a scenario in which we have a container component containing menu and side bar as its static elements plus child-component. while clicking the menu, it's corresponding component will render as child-component.

I'm using nested absolute route with react-router as follow 

    <Route component={ home } >
       <Route path="menu-1" component={ menu-1 } />
       <Route path="menu-2" component={ menu-2 } />
       <Route path="menu-3" component={ menu-3 } />

inside home component i have something as follow: 

    <div className='root'>
        <menuComponent />
        <sideBarComponnent />
        {this.props.children}

    </div>

as you can see i can't pass callback function to child-component for menu-1 , menu-2 i have no problem, but while clicking menu-3 and rendering it's component in the content tag,
i need to give it full width and set side bar display to none while the side bar has rendered in the container component i can't control it inside the child-one in a regular way

Im looking for a way which can be able to handle it inside home component

2
javascriptreactjsreact-router

2 Answers

1
votes

You can add function in props of child component. And when you need to change parent styles you call this function in child component. This function will change state of parent component and change it's styles.

Example:

class Parent extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            backgroundColor: 'yellow'
        }
    }

    onChangeStyle(backgroundColor) {
        this.setState({
            backgroundColor: backgroundColor
        })
    }

    render() {
        return <div style={{backgroundColor: this.state.backgroundColor, padding: 10}}>
            <Child onChangeParentStyle={this.onChangeStyle.bind(this)}/>
        </div>
    }
}

class Child extends React.Component {
    onClick() {
        this.props.onChangeParentStyle('red');
    }
    render() {
        return <span onClick={this.onClick.bind(this)} style={{background: 'white', cursor: 'pointer'}}>
            Change parent style
        </span>
    }
}

React.render(<Parent />, document.getElementById('container'));

Example on JSFiddle

1
votes

You can use this.props.location.pathname inside componentWillMount as follow:

componentWillMount(){
 let propPlainUrl = /[a-zA-Z]+/g.exec(this.props.location.pathname);
               this.setState({
                  activeMenu: menuItems.indexOf(propPlainUrl[0]) + 1
            });

You can use componentWillMount to set initial value for active key according to the selected route-menus

the above code just solve the problem once at the intial rendering for home component But what if you want to keep your procedure updated while component get updated on click menu event?

You can use same code with slight change as follow : 

componentWillReceiveProps(nextProps){
     let propPlainUrl = /[a-zA-Z]+/g.exec(nextProps.location.pathname);
     this.setState({
       activeMenu: menuItems.indexOf(propPlainUrl[0]) + 1
     });
   }

```

componentWillReceiveProps will let you update the state on component update