title: How to show information from API when using search box in ReactJS?
body: <p>I'm using the Star Wars API to build a React JS project. The aim of my app is to be able to search for characters. </p>
  
  <p>Here is my code for the search component in the my app. </p>
  
  <p>At the moment I'm able to retrieve data the API and show the information on the page but I can't work out how to show this information when it's searched for. </p>
  
  <p>Any ideas?</p>
  
  <pre><code>import React, { Component } from 'react';
  class Search extends Component {
    constructor(props){
      super(props)
      this.state = {
        query:'',
        peoples: [],
      }
    }
  
   onChange (e){
     this.setState({
       query: e.target.value
     })
    if(this.state.query &amp;&amp; this.state.query.length &gt; 1) {
       if(this.state.query.length % 2 === 0){
         this.componentDidMount()
       }
     }
   }
  
  componentDidMount(){
    const url = "https://swapi.co/api/people/";
    fetch (url,{
      method:'GET'
    }).then(results =&gt; {
      return results.json();
    }).then(data =&gt; {
      let peoples = data.results.map((people) =&gt; {
        return(
          &lt;ul key={people.name}&gt;
          &lt;li&gt;{people.name}&lt;/li&gt;
          &lt;/ul&gt;
        )
      })
      this.setState({peoples: peoples});
      console.log("state", peoples)
    })
  }
  
   render() {
     return (
       &lt;form&gt;
         &lt;input
           type="text"
           className="search-box"
           placeholder="Search for..."
           onChange={this.onChange.bind(this)}
         /&gt;
         {this.state.peoples}
       &lt;/form&gt;
     )
   }
  }
  
  export default Search
  </code></pre>