title: How to filter data based on value in input field using react and javascript?
body: <p>i have the data like below,</p>
  <p>const data = [
  {
  &quot;id&quot;:200,
  &quot;description&quot;:&quot;Substitute&quot;,
  &quot;start date&quot;:&quot;1990-12-
  28T00:00:00+00:00&quot;
  },
  {
  &quot;id&quot;:1,
  &quot;description&quot;:&quot;some description&quot;,
  &quot;start date&quot;:&quot;2013-06-28T00:00:00+00:00&quot;
  }
  ],</p>
  <p>i initially get this data from doing a fetch to an api and i store it in data state and display it in a table with id, description and start_date fields in the table like below,</p>
  <p><a href="https://i.stack.imgur.com/wMAZw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wMAZw.png" alt="enter image description here" /></a></p>
  <p>there is an input field to search for description and id. if user enters a value in the input field, it should filter the data in the table that matches with description or id.</p>
  <p>so for example if user enters the string 'Substitute' it should return data related to the matched description like below,</p>
  <p><a href="https://i.stack.imgur.com/thvmf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/thvmf.png" alt="enter image description here" /></a></p>
  <p>Now if user enters the id say 1 then it should return data related to the matched id like below,
  <a href="https://i.stack.imgur.com/TLmyB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TLmyB.png" alt="enter image description here" /></a></p>
  <p>my code is like below,</p>
  <pre><code>class App extends Component {
      constructor(props) {
          super(props);
          this.state = {
              data: [],
              query: &quot;&quot;,
              filtered_data: [],
          };
      }
     
      get_data = () =&gt; {
          fetch(proxyurl + url, {
              method:'get',
              headers: {'Content-type':'application/json','Cache-Control': 'no-cache'}, //api to get 
              //the data
          })
          .then(res =&gt; res.json())
          .then(data =&gt; {
          const { query } = this.state;
          const filtered_data = data.filter(element =&gt; {
              return element.name.toLowerCase().includes(query.toLowerCase());
          })
          this.setState({
              data,
              filtered_data
          });
      });
  };
  
  handle_change = e =&gt; {
      const query = e.target.value;
  
      this.setState(prevState =&gt; {
          const filtered_data = prevState.data.filter(element =&gt; {
              return element.name.toLowerCase().includes(query.toLowerCase());
          });
  
          return {
              query,
              filtered_data
          };
      });
  };
  
  componentDidMount(){
      this.get_data();
  }
  
  render() {
      return (
          &lt;&gt;
              {this.state.filtered_data &amp;&amp;
                  &lt;&gt;
                      &lt;div&gt;
                          &lt;label&gt;&lt;/label&gt;
                          &lt;input type=&quot;text&quot; placeholder=&quot;Filter Table&quot; value={this.state.query} 
                          onChange={this.handle_change}/&gt;
                      &lt;/div&gt;
                      &lt;Table
                          data={this.state.filtered_data}
                      /&gt;
                  &lt;/&gt;
        
              }
          &lt;/&gt;
      )
  }
  </code></pre>
  <p>};</p>
  <p>this gives me an error like</p>
  <p>&quot;Unhandled Rejection (TypeError): Cannot read property 'toLowerCase' of undefined&quot;</p>
  <p>not sure how to fix this. i am learning react and javascript. could someone help me with this. thanks.</p>