title: ReactJS change state of another class from child
body: <p>I'm trying to understand the <code>state.props</code> to help me pass a value from a child to a parent. I have a <code>header component</code> (child) that when a link is clicked it should pass a value to a method inside the <code>App component</code> (parent). This method then sets the state of a value which is used for other things. I've tried binding the method inside the App.js file but that isn't working. I get the error when I click a link: <code>×
  TypeError: _this.changeSearchState is not a function</code></p>
  
  <p><strong>Header.js</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import { Link } from 'react-router-dom';
  
  class Header extends Component {
  
  changeSearch = (e) =&gt; {
  e.preventDefault();
     var type = this.value;
     this.changeSearchState(type);
  }
  
  render() {
  return (
  &lt;header&gt;
        &lt;div className="float-right top-bar"&gt;
          &lt;Link onClick={this.changeSearch} value="users" to="/users"&gt;Users&lt;/Link&gt;
          &lt;Link onClick={this.changeSearch} value="feedback" to="/feedback"&gt;Feedback&lt;/Link&gt;
          ...
        &lt;/div&gt;
  &lt;/header&gt;
  )
  }
  }
  export default Header;
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>class App extends Component {
  constructor(props) {
  super(props)
  this.state = {
      isOpen: false,
      dataType: ''
  }
  this.changeSearchState = this.changeSearchState.bind(this);
  }
  changeSearchState = (dataType) =&gt; {
   this.setState({
    dataType: dataType
   });
  }
  ...
  </code></pre>