React: Passing state from child to child to parent

Question

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})
}

Answer 1

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}
/>