title: ReactJS: This.props.toggleModal is not a function
body: <p>I'm trying to access a parent method from a child to show a modal on screen and I'm getting the error: <code>This.props.toggleModal is not a function</code>. I'm passing the method down to the child so it can be called and using the correct state (I think). The button does call it's own method which in turn calls the parent. The modal component sits inside App.js.</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>class App extends Component {
    constructor() {
    super()
  this.state = {
      isOpen: false
   }
  }
  toggleModal = () =&gt; {
  this.setState({
    isOpen: !this.state.isOpen
  });
  console.log('Open');
  }
  render() {
  return (
    &lt;div className="App"&gt;
      &lt;Modal toggleModal={this.toggleModal} show={this.state.isOpen}
            onClose={this.toggleModal}&gt;
            Here's some content for the modal
      &lt;/Modal&gt;
      &lt;div className="container"&gt;
        &lt;Header/&gt;
        &lt;main&gt;
          &lt;Route path="/users"
             children={({ match, ...rest }) =&gt; (
               &lt;TransitionGroup component={firstChild}&gt;
                 {match &amp;&amp; &lt;UserList {...rest} /&gt;}
               &lt;/TransitionGroup&gt;
          )}/&gt;
          ...
        &lt;/main&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  }
  }
  </code></pre>
  
  <p><strong>SearchBar.js</strong> - (located inside the user page)</p>
  
  <pre><code>class SearchBar extends Component {
  constructor(props) {
  super(props)
  this.state = {
    type: this.props.type,
    value: ''
  };
  }
  componentWillReceiveProps(nextProps) {
  if (nextProps.type !== this.props.type) {
    this.setState({ type: nextProps.type });
  }
  };
  handleClick = (e) =&gt; {
  e.preventDefault();
  console.log("Clicked!!!");
  this.props.toggleModal();
  };
  handleChange = e =&gt; {
    console.log(this.state.type);
    this.setState({ value: e.target.value });
  };
  
  render () {
  const isUser = this.state.type;
  let rightContent = null;
  if (isUser === "tour" || isUser === "venue") {
  rightContent =
  &lt;div className="column"&gt;
    &lt;div className="float-right"&gt;&lt;button className="add-new" onClick={this.handleClick}&gt;Add New&lt;/button&gt;&lt;/div&gt;
  &lt;/div&gt;
  } else {
  rightContent =
  &lt;div className="column"&gt;
      &lt;div className="float-right"&gt;
        &lt;div className="results-block"&gt;
          &lt;b&gt;0&lt;/b&gt;/&lt;small&gt;292&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  }
  return (
  &lt;div className="row main-search"&gt;
    &lt;div className="column"&gt;
        &lt;form action=""&gt;
          &lt;fieldset&gt;
            &lt;label htmlFor="search"&gt;
              &lt;input type="text"
                  placeholder="Start typing..."
                  id="search-box"
                  onChange={this.handleChange}
                  value={this.state.value} /&gt;
            &lt;/label&gt;
          &lt;/fieldset&gt;
        &lt;/form&gt;
    &lt;/div&gt;
    {rightContent}
  &lt;/div&gt;
  )
  }
  }
  
  export default SearchBar;
  </code></pre>