Александр Чернокондратенко

Вопрос поставлен неправильно, так как вы передаете функцию в дочерний компонент, а не в родительский.

Вам по-хорошему надо использовать arrow function и таких проблем возникать не будет:

this.state.title.map((item, i) => (
  <TodoList
    key={i}
    index={i}
    deleteItem={descriptionArr[i]}
    title={titleArr[i]}
    deleteItem={this.deleteItem}
  />
))

Тот способ, которым вы решили проблему в React сообществе использовать не принято.

Сама проблема в том, что контекст обычной функции(написанной через ключевое слово function) ссылается в strict режиме на undefined, в обычном на window.

Вам необходимо разобраться c основами JS и с синтаксисом ES6. Есть для этих целей хороший ресурс learn.javascript.ru
Вашем примере видно одну семантическую ошибку, вы назвали компонент описывающий задачу TodoList, его следовало назвать TodoItem.
То, что вы раздельно храните массивы с title и description - ужаснейшее архитектурное решение, храните задачи в виде массива объектов, описывающих сущность Todo:

[
  {
    title: 'title',
    description: 'description',
  },
  {
    title: 'title',
    description: 'description',
  },
  {
    title: 'title',
    description: 'description',
  }
]

По-хорошему у вас должен быть запрос на сервер с сортировкой, пагинацией, фильтрацией и лимитом.
На каждый клик по сортировке, пагинатору или фильтру запрос. Например:

GET '/api/v1/animals?page=1&limit=20sort=name&sortDirection=DESC&priceFrom=1000&priceTo=2000'

То что вы хотите реализовать, как минимум, вряд ли найдет применение в реальном приложении.
Учитесь решать реальные задачи.

А трюки с display: none, при возможностяx react вообще можно не использовать.

Даже если пока не можете реализовать сервер с бд и REST API. Правильней будет хранить состояние фильтра в state компонента и выдавать на редер отфильтрованный по параметрам фильтра из state массив с животными. Изменился фильтр - произошел рендер. Вот и вся задача.