title: Fetch data from API when form's search button clicked and show data on another page in React JS
body: <p>I am developing a React JS web application where I have a form with four select fields (Make, Model, Min price and Max price) and a Search button. The data for search results will be fetched from API according to the selection of options. I want to show that data on another page in a card (page route path: /search) when user clicked on search button. I am using react router. The API url/end point is <a href="https://mysterious-journey-51969.herokuapp.com/api/search-vehicle/?q=mercedes&amp;m=sprinter&amp;pf=0&amp;pt=100000" rel="nofollow noreferrer">https://mysterious-journey-51969.herokuapp.com/api/search-vehicle/?q=mercedes&amp;m=sprinter&amp;pf=0&amp;pt=100000</a> where "q" field matches Vehicle Make, "m" field matches Model, "pf" field matches Min Price, "pt" field matches Max Price. How I can do that?</p>
  
  <p>Here is my Form component code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Form, FormGroup, Input } from 'reactstrap';
  import { veh_data } from '../shared/vehicle_make_and_models';
  
  const defaultValues = [
      { value: 0, text: 0, key: 1 },
      { value: 500, text: 500, key: 2 },
      { value: 1000, text: 1000, key: 3 },
      { value: 1500, text: 1500, key: 4 },
      { value: 2000, text: 2000, key: 5 },
      { value: 2000, text: 2000, key: 6 }
  ];
  
  const MIN_TITLE = { selected: true, disabled: true, text: 'Min Price' };
  const MAX_TITLE = { selected: true, disabled: true, text: 'Max Price' };
  
  class ImgAndForm extends Component {
      constructor(props) {
          super(props);
  
          this.handleSearch = this.handleSearch.bind(this);
          this.keyToOption = this.keyToOption.bind(this);
          this.renderOptions = this.renderOptions.bind(this);
          this.handleModelChange = this.handleModelChange.bind(this);
  
          this.state = {
              minData: [MIN_TITLE, ...defaultValues],
              maxData: [MAX_TITLE, ...defaultValues],
  
              minValue: null,
              maxValue: null,
              modelSelected: null
          };
  
      }
  
      renderOptions(data) {
          return data.map(datum =&gt; {
              // this allows us to indicate whether we are selecting or disabling
              const selected = datum.selected || false;
              const disabled = datum.disabled || false;
  
              return (
                  &lt;option key={datum.key} value={datum.value} selected={selected} disabled={disabled}&gt;
                      {datum.text}
                  &lt;/option&gt;
              );
          });
      }
  
      handleModelChange(event) {
          console.log(event.target.value);
          this.setState({ modelSelected: event.target.value });
      }
  
      handleSearch(event) {
          alert("Search button clicked");
  
      }
  
      keyToOption(key) {
          return key.split("-")
              .map(word =&gt; word.slice(0, 1).toUpperCase() + word.slice(1))
              .join(" ");
      }
  
      handleMinSelect = event =&gt; {
          const value = event.target.value;
          const newMaxValues = [];
  
          defaultValues.forEach(datum =&gt; {
              if (datum.value &gt;= Number.parseInt(value, 10)) {
                  newMaxValues.push(datum);
              }
          });
  
          this.setState({
              maxData: [MAX_TITLE, ...newMaxValues],
              minValue: value
          });
      };
  
      handleMaxSelect = event =&gt; {
          const value = event.target.value;
          this.setState({ maxValue: value });
      };
  
      render() {
  
          const vehicles = veh_data.reduce((acc, veh, i) =&gt; {
              let make = Object.keys(veh)[0],
                  vehModels = veh[make];
  
              return {
                  makes: [
                      ...acc.makes,
                      &lt;option key={make + i} value={make}&gt;{this.keyToOption(make)}&lt;/option&gt;
                  ],
                  models: {
                      ...acc.models,
                      [make]: vehModels.map((model, i) =&gt; {
                          return (
                              &lt;option key={make + model + i} value={model}&gt;
                                  {this.keyToOption(model)}
                              &lt;/option&gt;
                          );
                      })
                  }
              };
          }, { makes: [], models: [] });
  
          const selectedModels =
              this.state.modelSelected &amp;&amp; this.state.modelSelected.length ? (
                  vehicles.models[this.state.modelSelected]
              ) : (
                      &lt;option value=""&gt;Model (select make first)&lt;/option&gt;
                  );
  
          return (
              &lt;div&gt;
                  &lt;header className="headerbg d-flex"&gt;
                      &lt;div className="container my-auto"&gt;
                          &lt;div className="row"&gt;
                              &lt;div className="offset-1 col-10 offset-lg-0 col-lg-4"&gt;
                                  &lt;div id="search-form-div" className="container"&gt;
                                      &lt;div className="row"&gt;
                                          &lt;div className="col-12 my-4"&gt;
                                              &lt;h3&gt;Search&lt;/h3&gt;
                                              &lt;Form onSubmit={this.handleSearch}&gt;
                                                  &lt;FormGroup&gt;
                                                      &lt;Input
                                                          onChange={e =&gt; this.handleModelChange(e)}
                                                          type="select"
                                                          name="q"
                                                          id="q"
                                                      &gt;
                                                          &lt;option value=""&gt;Make&lt;/option&gt;
                                                          {vehicles.makes}
                                                      &lt;/Input&gt;
                                                  &lt;/FormGroup&gt;
                                                  &lt;FormGroup&gt;
                                                      &lt;Input type="select" name="m" id="m"&gt;
                                                          {selectedModels}
                                                      &lt;/Input&gt;
                                                  &lt;/FormGroup&gt;
                                                  &lt;FormGroup&gt;
                                                      &lt;Input type="select"
                                                          name="pf"
                                                          id="pf"
                                                          value={this.state.minValue}
                                                          onChange={this.handleMinSelect}&gt;
                                                          {this.renderOptions(this.state.minData)}
                                                      &lt;/Input&gt;
                                                  &lt;/FormGroup&gt;
                                                  &lt;FormGroup&gt;
                                                      &lt;Input
                                                          type="select"
                                                          name="pt"
                                                          id="pt"
                                                          value={this.state.maxValue}
                                                          onChange={this.handleMaxSelect}&gt;
                                                          {this.renderOptions(this.state.maxData)}
                                                      &lt;/Input&gt;
                                                  &lt;/FormGroup&gt;
                                                  &lt;FormGroup&gt;
                                                      &lt;Input type="submit" name="search" id="search" className="btn btn-primary" value="Search" /&gt;
                                                  &lt;/FormGroup&gt;
                                              &lt;/Form&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/header&gt;
  
              &lt;/div&gt;
          );
      }
  }
  
  export default ImgAndForm;
  </code></pre>
  
  <p>Here is my Search result component code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Smallheader from './SmallHeader';
  import { Card, CardImg, CardTitle, CardSubtitle } from 'reactstrap';
  
  class SearchResult extends Component {
  constructor(props) {
      super(props);
  
      this.state = {
      };
  }
  
  
  render() {
  
      return (
          &lt;div&gt;
              &lt;Smallheader /&gt;
              &lt;div className="my-5"&gt;
                  &lt;div className="container text-center" id="contactContainer"&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col-lg-12 mx-auto"&gt;
                              &lt;h2 className="text-center"&gt;Search Results&lt;/h2&gt;
                              &lt;hr className="my-4 thick-hr" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col-6 col-lg-3 mt-4"&gt;
                              &lt;Card&gt;
                                  &lt;a href="#"&gt;
                                      &lt;CardImg src="" className="img-fluid" /&gt;
                                      &lt;CardTitle&gt;Title Here&lt;/CardTitle&gt;
                                      &lt;CardSubtitle&gt;Price Here&lt;/CardSubtitle&gt;
                                  &lt;/a&gt;
                              &lt;/Card&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  }
  
  export default SearchResult;
  </code></pre>