title: Cannot read property 'toLowerCase' of undefined - REACT - FIRESTORE
body: <p>I'm a bit new to React and Firestore and already trying to figure out what is happening for a couple of hours. I Try to make my filter function working with data which I receive from Firestore in APP.js. I pass the data {tasks, searchTerm} to DASHBOARD component. The filter worked before when using state and props, but after replacing the hard-coded data in state with firestore data, it doesn't work anymore and I get the following error when filtering the array in the DASHBOARD component:
  <b>Cannot read property 'toLowerCase' of undefined</b></p>
  
  <p>I've tried to send the data without any filtering directly to TASKS.js and this is working correctly (all the tasks are shown). But as soon as I pass newArray to , it doesn't work anymore.</p>
  
  <p>Also, when logging task.title in tasks.filter function in the DASHBOARD component, it shows all the data (with a little delay because the data is coming from Firestore)</p>
  
  <p>APP.JS -</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import Dashboard from './Components/Dashboard/Dashboard'
  import AddTask from './Components/Tasks/Task/AddTask'
  import Navbar from './Components/Navbar/Navbar'
  import Searchbar from './Components/Searchbar/Searchbar'
  import firebase from './Firebase';
  
  class App extends Component {
    constructor(props) {
      super(props)
      this.ref = firebase.firestore().collection('tasks')
      this.state = {
        tasks: [],
        searchTerm: ""
      }
  
      this.handleLikeButton = this.handleLikeButton.bind(this)
      this.handleRemoveButton = this.handleRemoveButton.bind(this)
      this.addTask = this.addTask.bind(this)
      this.handleFilter = this.handleFilter.bind(this)
    }
  
    componentWillMount() {
      const db = firebase.firestore()
      const allTasks = []
      db.collection('tasks').onSnapshot(collection =&gt; {
         const tasks = collection .docs.map(doc =&gt; doc.data())
         this.setState({ tasks: tasks, searchTerm: "" })
      })
    }
  
    handleLikeButton = (task) =&gt; (e) =&gt; {
      const tasks = [...this.state.tasks]
      const index = tasks.indexOf(task)
      tasks[index].likes++
      this.setState({
        tasks: tasks
      })
    }
  
    addTask = (taskName) =&gt; (e) =&gt; {
      this.ref.add({
        id: Math.floor(Math.random() * 100000000000000),
        title: taskName,
        likes: 0
      })
    }
  
    handleRemoveButton = (removingTask) =&gt; (e) =&gt; {
      const tasks = [...this.state.tasks]
      const newTasks = tasks.filter(task =&gt; removingTask.id !== task.id)
      this.setState({
        tasks: newTasks
      })
    }
  
  
    handleFilter = (searchTerm) =&gt; {
      this.setState({
        searchTerm: searchTerm
      })
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Navbar /&gt;
          &lt;Searchbar handleFilter={this.handleFilter} /&gt;
          &lt;AddTask addTask={this.addTask} /&gt;
          &lt;Dashboard tasks={this.state.tasks} searchTerm={this.state.searchTerm} handleLikeButton={this.handleLikeButton} handleRemoveButton={this.handleRemoveButton}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>DASHBOARD.JS -</p>
  
  <pre><code>import React, { Component } from 'react'
  import Tasks from '../Tasks/Tasks'
  
  class Dashboard extends Component {
    constructor(props) {
      super(props)
  
      this.filterTasks = this.filterTasks.bind(this)
    }
  
    filterTasks = () =&gt; {
        const tasks = [...this.props.tasks]
        const newArray = tasks.filter(task =&gt;
          task.title.toLowerCase().indexOf(this.props.searchTerm.toLowerCase()) &gt; -1)
        return (
          &lt;Tasks tasks={newArray} handleLikeButton={this.props.handleLikeButton} handleRemoveButton={this.props.handleRemoveButton}  /&gt;
        )
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;h2&gt;Dashboard&lt;/h2&gt;
          {this.filterTasks()}
        &lt;/div&gt;
      )
    }
  }
  
  
  export default Dashboard
  
  </code></pre>
  
  <p>ADDTASK.JS</p>
  
  <pre><code>import React, { Component } from 'react'
  
  class AddTask extends Component {
  
    constructor(props) {
      super(props)
  
      this.state = {
        addNewTaskFieldEmpty: true,
        taskName: ""
      }
  
      this.onChangeHandler = this.onChangeHandler.bind(this)
      this.disableButton = this.disableButton.bind(this)
    }
  
  
    onChangeHandler(e) {
      this.setState({
        taskName: e.target.value,
      })
      this.disableButton(e.target.value)
    }
  
    disableButton(taskName) {
      if(taskName.length == 0) {
        this.setState({addNewTaskFieldEmpty: true})
      } else {
        this.setState({addNewTaskFieldEmpty: false})
      }
    }
  
  
    render() {
      return (
        &lt;div&gt;
          &lt;div className="mdc-text-field half-size"&gt;
            &lt;input className="mdc-text-field__input " onChange={this.onChangeHandler}  /&gt;
            &lt;div className="mdc-line-ripple"&gt;&lt;/div&gt;
            &lt;label className="mdc-floating-label"&gt;Task Name&lt;/label&gt;
          &lt;/div&gt;
          &lt;a className={"btn-floating btn-large waves-effect waves-light red " + (this.state.addNewTaskFieldEmpty ? 'disabled' : '')} onClick={this.props.addTask(this.state.taskName)}&gt;&lt;i className="material-icons"&gt;add&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default AddTask
  </code></pre>