title: React Search bar fetch api
body: <p>I'm comparatively new to ReactJs</p>
  <p>I've already implemented routing. What I need to do next is to make an auto complete search bar which will automatically suggest country name. And when finally the user inputs the country name some data associated with that particular country will be shown on the page</p>
  <p><a href="https://i.stack.imgur.com/39lqR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/39lqR.jpg" alt="enter image description here" /></a></p>
  <p>This is the part I've done till now. And my Search component is as below:</p>
  <pre><code>import React from 'react';
  import axios from 'axios';
  import * as ReactBootstrap from 'react-bootstrap';
  
  
  class Search extends React.Component{
      
      render(){
          return(
              &lt;ReactBootstrap.Container&gt;
                  &lt;ReactBootstrap.Form&gt;
                      &lt;ReactBootstrap.Form.Group controlId=&quot;searchCountry&quot;&gt;
                          &lt;ReactBootstrap.Form.Control type=&quot;text&quot; placeholder=&quot;Seach for a country&quot; /&gt;
                      &lt;/ReactBootstrap.Form.Group&gt;
                  &lt;/ReactBootstrap.Form&gt;
              &lt;/ReactBootstrap.Container&gt;
          );
      }
  }
  
  export default Search;
  </code></pre>
  <p>which is being used in Home.js inside /Pages folder:</p>
  <pre><code>import React from 'react';
  import Search from '../Components/Search';
  
  class Home extends React.Component{
      render(){
          return(
              &lt;div&gt;
                  &lt;p&gt;Home page&lt;/p&gt;
                  &lt;Search/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Home
  </code></pre>
  <p>so basically whatever I type in the search box it'll become a query string and some data will be shown associated with that</p>
  <p>Now my problem is I don't know what to do next. As said I'm new in this sector and I'm probably not searching for the right things. Need some pointers</p>
  <p>For reference my</p>
  <pre><code>http://localhost:8000/api/v1/countries/test_country
  </code></pre>
  <p>will return</p>
  <pre><code>{
    &quot;error&quot;: false,
    &quot;data&quot;: [
      {
        &quot;country_name&quot;: &quot;test_country&quot;,
        &quot;type&quot;: &quot;Medical&quot;,
        &quot;fees&quot;: &quot;500 Taka&quot;,
        &quot;duration&quot;: &quot;3 Months&quot;,
        &quot;details&quot;: &quot;lorem ipsum dolor mis amet&quot;
      },
      {
        &quot;country_name&quot;: &quot;test_country&quot;,
        &quot;type&quot;: &quot;Tourist&quot;,
        &quot;fees&quot;: &quot;500 Taka&quot;,
        &quot;duration&quot;: &quot;3 Months&quot;,
        &quot;details&quot;: &quot;lorem ipsum dolor mis amet&quot;
      }
    ],
    &quot;country_name&quot;: &quot;test_country&quot;
  }
  </code></pre>
  <p>N.B: using react-bootstrap and nodejs for backend</p>