CODEWITHSUNDEEP
javascripthtmlreactjsstatejsx
alt-rock
alt-rock

Reputation: 357

React: Passing state from child to child to parent

I am trying to pass a value through 2 child elements to the parent. The chain looks like this:

Child1 > Child2 > Parent

However, My parent handler is not grabbing the value in Child1. I trying to console log the state of theString in the parent component, however, nothing displays. How do i pass the handler function to child1 and grab its value to store in state?

Child 1

  <input ref="theString" type="string" onChange={this.props.handleChangeOfString} value={this.state.theString} />

Child 2 Component

<Tab tabId="4">
   {this.props.nav4Content}
   {this.props.handleChangeOfString}
</Tab>

Parent Constructor:

constructor(props) {
    super(props);
    this.state = {
       theString: ''
    };
    this.handleChangeOfString = this.handleChangeOfString.bind(this);
}

Parent Component:

<StringComponent
  nav4Content={colorsTab}
  onChange={this.handleChangeOfString}
/>

Parent Handler:

handleChangeOfString(e) {
  this.setState({theString: e.target.value})
}

Upvotes: 1

Views: 91

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281686

The issue is how you are passing props from child2 to child1. You are not passing the values as props but as children in the child2 component. Change it to

<Tab 
   tabId="4" 
   nav4Content={this.props.nav4Content} 
   handleChangeOfString={this.props.onChange}
/>

Upvotes: 2

Related Questions