TypeError: Cannot read property 'toLowerCase' of undefined in react

Question

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:

TypeError: Cannot read property 'toLowerCase' of undefined

Code:

App.js

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)=>{
    //filter out item array and return results with no matched id
    const deleteList=this.state.list.filter(item=>item.objectID!==id);
    //setting state of list to lastest deleteList
    this.setState({
      list:deleteList
    })  
  }
  //to add a search bar
  onSearchChange=(e)=>{
    //set state to value in search bar
    this.setState({
      [e.target.name]:e.target.value
    })
  }


  render() {
    const {list,searchText}=this.state;
    return(
      <div>
       <Table
       list={list}
       onDismiss={this.onDismiss}/>
       <Search
       searchText={searchText}
       onSearchChange={this.onSearchChange}/>
      </div>
    )

  }
}

export default App;

Table.js

import React, { Component } from 'react';

class Table extends Component {


  render() {
    const {list,searchText}=this.props;
    return(
        <div>

       {/*Filter out item title and search title and give away results from item array */}
        {list.filter((item)=>{
          {/*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)=>{

            return(

            <div key={item.objectID}>
                  {item.objectID}
                  {item.title}
                  <span>{item.author}</span>
                  <span>{item.num_comments}</span>
                  <span>{item.points}</span>
                <button onClick={()=>this.onDismiss(item.objectID)}>delete</button>
            </div>

          )})}
      </div>
    )

  }
}

export default Table;

Search.js

import React, { Component } from 'react';

class Search extends Component {


  render() {
    const {searchText,onSearchChange}=this.props;
    return(
      <div>
          <input name="searchText" value={searchText}onChange={onSearchChange} type="text"></input>
      </div>
    )

  }
}

export default Search;

Answer 1

Solved I didn't pass searchText to the table that's why it was giving an error

<Table
       list={list}
       onDismiss={this.onDismiss}
       searchText={searchText}/>