title: How to Create a Search Field in ReactJS
body: <p>I'm new to react, and I'm working on a small project that uses a search bar to find data that I've gotten from my database. </p>
  
  <p>The code for this component is below: </p>
  
  <pre><code>import React, { Component } from 'react';
  
  class BodyData extends Component {
      state = {
          query: '',
          data: [],
      }
  
      handleInputChange = () =&gt; {
          this.setState({
              query: this.search.value
          })
          this.filterArray();
      }
  
      getData = () =&gt; {
          fetch(`http://localhost:4000/restaurants`)
          .then(response =&gt; response.json())
          .then(responseData =&gt; {
              // console.log(responseData)
              this.setState({
                  data:responseData
              })
          })
      }
  
      filterArray = () =&gt; {
          var searchString = this.state.query;
          var responseData = this.state.data
          if(searchString.length &gt; 0){
              // console.log(responseData[i].name);
              responseData = responseData.filter(l =&gt; {
                  console.log( l.name.toLowerCase().match(searchString));
              })
          }
      }
  
      componentWillMount() {
          this.getData();
      }
      render() {
          return (
              &lt;div className="searchForm"&gt;
                  &lt;form&gt;
                      &lt;input type="text" id="filter" placeholder="Search for..." ref={input =&gt; this.search = input} onChange={this.handleInputChange}/&gt;
                  &lt;/form&gt;
                  &lt;div&gt;
                      {
                          this.state.data.map((i) =&gt;
                              &lt;p&gt;{i.name}&lt;/p&gt;
                          )
                      }
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  
  export default BodyData;
  </code></pre>
  
  <p>So basically, I want to update the state as I type in the query text, and have the restaurant names I've mapped be reduced till a match is found.</p>
  
  <p>From what I understood, <code>this.state.data</code> will be filtered as I type in my query in the search bar. However when I map out <code>this.state.data</code>, I get the whole list of restaurants instead of what I want to see. </p>
  
  <p>Ive been through a bunch of tutes, and I'm not exactly sure how to go about doing that. </p>
  
  <p>Can anyone help me with this please? Any other comments on the code are also welcome. I'm here to learn :)</p>
  
  <p>Thank you!</p>