CODEWITHSUNDEEP
reactjsreduxreact-redux
fortm
fortm

Reputation: 4198

Child component changing parent component state

Here there is app root component passing a handleHeaderTitle function to all its children by cloning. Inside children components, the function is called in componentWillMount() and as a result root component updates header text based on route.

Root : 

    {
         this.props.children &&
                    React.cloneElement(this.props.children, {
                      handleHeaderTitle: this.handleHeaderTitle
                    })
    }

    handleHeaderTitle(title) {
      this.setState({ headerTitle: title });
    }

Child:

 componentWillMount() {
    this.props.handleHeaderTitle("Profile");
  }
  Profile.propTypes = { handleHeaderTitle: React.PropTypes.func };

Is this right usecase for adding redux since the state is not really local here as is being set from a child component on its parent ?

I think I will need to create actions like SET_PROFILE_HEADER and inside reducers, combine these. But still figuring out how to inform container root component that child component has changed the header title

Upvotes: 0

Views: 122

Answers (1)

chardy
chardy

Reputation: 1253

To answer your question directly, you don't need Redux to solve your problem. Redux helps you when you have to maintain a lot of state, or when your state needs to be reflected parts of the application that don't have a close common ancestor. In other words, when it gets too cumbersome to use good old fashioned React state.

A more common approach to your specific problem in React would be to include your layout in the child component instead of the root. This avoids the issue of trying to get the child to control content in the parent. It helps preserve the "unidirectional data flow" which is what React is all about.

class Page extends React.Component {
  render() {
    return (
      <div>
        <div className='profile-header'>
          { this.props.headerTitle }
        </div>
        <div className='profile-content'>
          { this.props.children }
        </div>
      </div>      
    )
  }
}

class MyFirstPage extends React.Component {
  render() {
    return (
      <Page headerTitle='Header Title 1'>
          <div>My content here</div>
      </Page>
    )
  }
}

Upvotes: 1

Related Questions