title: How to redirect to another component onsubmit Search?
body: <p>So I'm working on an react app and I've been stuck on an issue for like two days. I'm building a search that gets data from TMDB, and all that works fine. When I type in the input all the data come flowing in! However, when I submit and try to redirect to the /results page which is linked to a component that displays the Search Results when directed to But its  redirect to result page and i can't show search result . Here is my code.</p>
  
  <pre><code>import React, { Component, Redirect } from "react";
  import axios from "axios";
  import { withRouter } from "react-router";
  
      constructor(props) {
      super(props);
      this.state = {
        results: [],
        term: ""
      };
  
      this.submit = this.submit.bind(this);
      this.handleChange = this.handleChange.bind(this);
    }
  
    componentDidUpdate(prevProps, prevState) {
      const { history } = this.props;
      if (prevState.results !== this.state.results) {
        history.push("/results");
      }
    }
  
    handleChange(event) {
      this.setState({
        [event.target.name]: event.target.value
      });
      console.log(this.state);
    }
  
    submit(e) {
      e.preventDefault();
      const term = e.target.elements.term.value;
      let url = `https://api.themoviedb.org/3/search/tv?api_key=6d9a91a4158b0a021d546ccd83d3f52e&amp;language=en-US&amp;query=${term}&amp;page=1`;
      axios
        .get(url)
        .then(({ data }) =&gt; {
          // const info = response.data.results;
          console.log(data);
          this.setState({
            results: data
          });
        })
        .catch(error =&gt; console.log(error));
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.submit}&gt;
            &lt;input
              onChange={this.handleChange}
              type="text"
              name="term"
              value={this.state.term}
            /&gt;
            &lt;button type="submit" bsStyle="primary"&gt;
              Find
            &lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default withRouter(Find);
  </code></pre>
  
  <p>and <code>Result.js</code></p>
  
  <pre><code>&lt;div className="search-poster-container"&gt;
       {this.props.results.map(result =&gt; { // This error show how to reolve this
       &lt;p&gt;{result.name}&lt;/p&gt;
      })} 
      &lt;h1&gt;Hello Result will fetch here&lt;/h1&gt;
  
    &lt;/div&gt;
  </code></pre>