title: TypeError: Cannot read property 'toLowerCase' of undefined in react
body: <p>I am writing a program where items are printing in a table component and a search bar is given. Initially I had written all the components into a single component(App.js).
  But now I am trying to split it into App, Table and Search
  While printing the values through props into Table I am getting an error:</p>
  
  <pre><code>TypeError: Cannot read property 'toLowerCase' of undefined
  </code></pre>
  
  <p>Code:</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import Table from './components/Table';
  import Search from './components/Search';
  
  const list = [
    {
    title: 'React',
    url: 'https://facebook.github.io/react/',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4,
    objectID: 0,
    },
    {
    title: 'Redux',
    url: 'https://github.com/reactjs/redux',
    author: 'Dan Abramov, Andrew Clark',
    num_comments: 2,
    points: 5,
    objectID: 1,
    },
    {
      title: 'Redux',
      url: 'https://github.com/reactjs/redux',
      author: 'Dan Abramov, Andrew Clark',
      num_comments: 2,
      points: 5,
      objectID: 2,
      },
      {
        title: 'Redux',
        url: 'https://github.com/reactjs/redux',
        author: 'Dan Abramov, Andrew Clark',
        num_comments: 2,
        points: 5,
        objectID: 3,
        },
    ];
  
    //will print the above data through map function
    //iteratre through item object and will print each property
    //will print out 
  class App extends Component {
    constructor(){
      super();
      this.state={
        list,
        searchText:''
      }
      this.onDismiss=this.onDismiss.bind(this);
      this.onSearchChange=this.onSearchChange.bind(this);
      //this.isSearched=this.isSearched.bind(this);
    }
  
    //to add a delete button
    onDismiss=(id)=&gt;{
      //filter out item array and return results with no matched id
      const deleteList=this.state.list.filter(item=&gt;item.objectID!==id);
      //setting state of list to lastest deleteList
      this.setState({
        list:deleteList
      })  
    }
    //to add a search bar
    onSearchChange=(e)=&gt;{
      //set state to value in search bar
      this.setState({
        [e.target.name]:e.target.value
      })
    }
  
  
    render() {
      const {list,searchText}=this.state;
      return(
        &lt;div&gt;
         &lt;Table
         list={list}
         onDismiss={this.onDismiss}/&gt;
         &lt;Search
         searchText={searchText}
         onSearchChange={this.onSearchChange}/&gt;
        &lt;/div&gt;
      )
  
    }
  }
  </code></pre>
  
  <p>export default App;</p>
  
  <p>Table.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Table extends Component {
  
  
    render() {
      const {list,searchText}=this.props;
      return(
          &lt;div&gt;
  
         {/*Filter out item title and search title and give away results from item array */}
          {list.filter((item)=&gt;{
            {/*The includes() method determines whether an array includes a certain value among its entries
            , returning true or false as appropriate. */}
            return item.title.toLowerCase().includes(searchText.toLowerCase());}).map((item)=&gt;{
  
              return(
  
              &lt;div key={item.objectID}&gt;
                    {item.objectID}
                    {item.title}
                    &lt;span&gt;{item.author}&lt;/span&gt;
                    &lt;span&gt;{item.num_comments}&lt;/span&gt;
                    &lt;span&gt;{item.points}&lt;/span&gt;
                  &lt;button onClick={()=&gt;this.onDismiss(item.objectID)}&gt;delete&lt;/button&gt;
              &lt;/div&gt;
  
            )})}
        &lt;/div&gt;
      )
  
    }
  }
  
  export default Table;
  </code></pre>
  
  <p>Search.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Search extends Component {
  
  
    render() {
      const {searchText,onSearchChange}=this.props;
      return(
        &lt;div&gt;
            &lt;input name="searchText" value={searchText}onChange={onSearchChange} type="text"&gt;&lt;/input&gt;
        &lt;/div&gt;
      )
  
    }
  }
  
  export default Search;
  </code></pre>