title: Redirect to another page after GET call in modal form in React
body: <p>I am trying to redirect to another page after fetch GET call from Modal from in react using history.props and I redirected but I don't know what should write there to show my actual data. I editied somehting i added something in history.props and componentDidMount in Report Here is my code:</p>
  
  <pre><code>import React, { Component } from "react";
  import Datee from "./Date";
  import { withRouter } from "react-router";
  
  export class CarReports extends Component {
    constructor(props) {
      super(props);
      this.state = {
        selectOptions: [],
        movie: [],
        mov: "",
        query: "",
        results: []
      };
  
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleChange = this.handleChange.bind(this);
    }
  
  
  
    async handleSubmit(e) {
      let authToken = localStorage.getItem("Token");
      try {
        const from = e.target.elements.from.value;
        const to = e.target.elements.to.value;
        const selections = [...e.target.elements.selectOptions.options].filter(
          opt =&gt; opt.selected
        );
        const selectedValues = selections.map(opt =&gt; opt.value);
        const selectedString = selectedValues.join(",");
        e.preventDefault();
        const res = await fetch(
          `http://localhost:8000/api/1/deliveries/report/?date__lte=${to}&amp;date__gte=${from}&amp;user=${selectedString}`,
          {
            method: "GET",
            headers: {
              Accept: "application/json",
              "Content-Type": "application/json",
              Authorization: "Bearer " + JSON.parse(authToken)
            }
          }
        );
        const movie = await res.json();
        console.log(movie);
        this.setState({
          movie
        });
        this.props.history.push({
      pathname: "/carreport",
      state: movie
    });
      } catch (e) {
        console.log(e);
      }
  
    }
  
    handleChange = e =&gt; {
      let target = e.target;
      let name = target.name;
      //here
      let value = Array.from(target.selectedOptions, option =&gt; option.value);
      this.setState({
        [name]: value
      });
    };
  
    render() {
      return (
        &lt;div id="car" class="modal"&gt;
          &lt;a
            href="# "
            rel="modal:close"
            className="float-right text-white h4"
            style={{
              background: "#b71c1c",
              borderRadius: "50%",
              padding: "10px",
              height: "32px",
              lineHeight: "10px"
            }}
          &gt;
            &amp;times;
          &lt;/a&gt;
          &lt;p className="mod" style={{ marginTop: "40px" }}&gt;
            CARS REPORT
          &lt;/p&gt;
  
          &lt;form style={{ marginTop: "20px" }} onSubmit={this.handleSubmit}&gt;
            &lt;div&gt;
              &lt;Datee /&gt;
            &lt;/div&gt;
            &lt;div className="form-group" style={{ marginTop: "20px" }}&gt;
              &lt;label style={{ opacity: "0.6", fontSize: "10px" }}&gt;
                CHOOSE A CAR
              &lt;/label&gt;
              &lt;select
                name="selectOptions"
                style={{ width: "390px" }}
                multiple={true}
                onChange={this.handleChange}
                value={this.state.selectOptions}
                class="form-control"
              &gt;
                &lt;option value="1"&gt;Choose Car From List&lt;/option&gt;
                &lt;option value="1"&gt;General Score&lt;/option&gt;
                &lt;option value="2"&gt;Dynamic&lt;/option&gt;
                &lt;option value="3"&gt;Speed&lt;/option&gt;
                &lt;option value="4"&gt;Fuel Save&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
  
            &lt;div style={{ marginTop: "50px" }}&gt;
              &lt;center&gt;
                &lt;button
                  type="submit"
                  value="Get Data"
                  className="btn btn-login text-white font-weight-bolder boxx "
                  style={{
                    height: "40px",
                    fontSize: "13px",
                    lineHeight: "30px",
                    width: "200px",
                    background: "rgba(183, 28, 28, 1)",
                    border: "none",
                    color: "white",
                    margin: "auto"
                  }}
                &gt;
                  RAPORT
                &lt;/button&gt;
              &lt;/center&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default withRouter(CarReports);
  </code></pre>
  
  <p>Here is my careport.js page where I want to display data. I don't know what to do here.</p>
  
  <pre><code>import React, { Component } from "react";
  import ReactToExcel from "react-html-table-to-excel";
  import CarReports from "../CarReports";
  
  class Report extends Component {
  
  componentDidMount() {
      const movie = this.props.location.state.movie;
      this.setState({
        movie
      });
      console.log(movie)
    }
  
    render() {
      return (
        &lt;div className="container" style={{ marginTop: "50px" }}&gt;
          &lt;CarReports /&gt;
          &lt;div className="headerr" style={{ marginTop: "25px" }}&gt;
            &lt;h6&gt;CAR REPORT&lt;/h6&gt;
            &lt;p className="p"&gt;From 12-17-2019 To 12-12-2019&lt;/p&gt;
            &lt;div className="driver report"&gt;
              &lt;table className="table" id="table-to-xls"&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;No&lt;/th&gt;
                    &lt;th&gt;Full Name&lt;/th&gt;
                    &lt;th&gt;Car Quantity&lt;/th&gt;
                    &lt;th&gt;Mileage[Km]&lt;/th&gt;
                    &lt;th&gt;Fuel Consumed[L]&lt;/th&gt;
                    &lt;th className="t"&gt;
                      Average Fuel&lt;br&gt;&lt;/br&gt; Consumed[L/100km]
                    &lt;/th&gt;
                    &lt;th className="t"&gt;Overspeed Distance[%]&lt;/th&gt;
                    &lt;th className="t"&gt;
                      Critical &lt;br&gt;&lt;/br&gt;Overspeed [qty.]
                    &lt;/th&gt;
                    &lt;th&gt;Score: Overall&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
  
                &lt;tfoot&gt;
                  &lt;tr className="thead"&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;Summary&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/tfoot&gt;
              &lt;/table&gt;
  
              &lt;div style={{ marginTop: "40px" }}&gt;
                &lt;center&gt;
                  &lt;a className="btn" href="#car" rel="modal:open" id="bttt"&gt;
                    NEW REPORT
                  &lt;/a&gt;
  
                  &lt;ReactToExcel
                    className="btn btn-success btn-lg bb"
                    table="table-to-xls"
                    filename="SoftbikeReport"
                    sheet="sheet 1"
                    buttonText="EXPORT CSV"
                  /&gt;
                &lt;/center&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Report;
  </code></pre>