title: Implement search bar using ReactJS
body: <p>I am building a beginner React app and am not able to understand how to handle my state so that I can redirect to a search results page:</p>
  
  <p>I have a main App component which uses React Router to deliver two components:</p>
  
  <p>1) Landing (<code>/</code>) -- has an input and should take you to <code>/search</code> and show only those objects whose title match your input
  2) Search (<code>/search</code>) -- either shows all objects if accessing the page directly or your filtered based upon your input</p>
  
  <p>My question is: if I handle the state in the App component, it will cause the state to update and a rerender upon a user typing in the Landing input element, but how can I get it to go to /search with the updated state? The index route will keep getting hit since it's just a rerender and the user is still on the landing page. </p>
  
  <p>I would like to handle this without redux as this will be a very small app.</p>
  
  <p>Here is the code for my parent component: </p>
  
  <pre><code>import React, { Component } from "react";
  import { BrowserRouter, Route, Switch } from "react-router-dom";
  import { shape, string } from "prop-types";
  
  import Landing from "./Landing";
  import Search from "./Search";
  import { shows } from "../data.json";
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        searchTerm: ""
      };
      this.updateSearchTermHandler = this.updateSearchTermHandler.bind(this);
    }
  
    updateSearchTermHandler(searchTerm) {
      this.setState({ searchTerm });
    }
  
    render() {
      return (
        &lt;BrowserRouter&gt;
          &lt;div className="app"&gt;
            &lt;Switch&gt;
              &lt;Route
                exact
                path="/"
                component={props =&gt; (
                  &lt;Landing
                    updateSearchTermHandler={this.updateSearchTermHandler}
                    searchTerm={this.state.searchTerm}
                    {...props}
                  /&gt;
                )}
              /&gt;
              &lt;Route
                path="/search"
                component={props =&gt; (
                  &lt;Search
                    updateSearchTermHandler={this.updateSearchTermHandler}
                    shows={shows}
                    {...props}
                  /&gt;
                )}
              /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  
  App.propTypes = {
    match: shape({
      params: string.isRequired
    }).isRequired
  };
  
  export default App;
  </code></pre>