TypeError: Невозможно прочитать свойство 'toLowerCase' неопределенного в Reactjs при отображении дважды

Question

У меня есть структура JSON, которая должна дважды отображать функцию в цикле для доступа к объектам в массиве.После сопоставления мне нужно текстовое поле для поиска в списке данных.Но я получаю следующее сообщение об ошибке

TypeError: Cannot read property 'toLowerCase' of undefined

Ниже приведена структура JSON:

{
  "brand": [
     {

    "title": "Brands",
    "options": [
    {
     "catgeory_name": "Sigma"
    },
    {
     "catgeory_name": "Footner"
    }
   ]
     }
  ]
}

Ниже приведен код компонента

class TvFilter extends Component {
constructor(props) {
   super(props);
   this.state = {
     searchInput: '',
   };
  }
}
onSearchInputChange = (e) => {
   this.setState({ searchInput: e.target.value })
}
elementContainsSearchString = (searchInput, element) => (searchInput ? element.catgeory_name.toLowerCase().includes(searchInput.toLowerCase()) : false);

filterItems = (itemList) => {
        let result = [];
        const { searchInput } = this.state;
        let filterbrands = this.props.tvfilter.brand
        if (filterbrands) { 
            console.log (filterbrands);
        } else {
            return 'loading...'
        }
        if (itemList && (searchInput)) {
            result = itemList.filter((element) => this.elementContainsSearchString(searchInput, element));
        } else {
            result = itemList || [];
        }

        result = filterbrands.map((item) => (
            <dl>
                <dt><input type="search" onChange={this.onSearchInputChange} className="pull-right" placeholder="Search by Brand" /></dt>
                <dt>{item.title}</dt>
                {
                    item.options.map(catname =>
                        <dd key={catname.catgeory_name} className={catname.catgeory_name} ><a href="#">{catname.catgeory_name}</a></dd>
                    )
                }
            </dl>
        ));
        return result;
    }

Функция рендеринга

render() {
  let filterbrands = this.props.tvfilter.brand
  const filteredList = this.filterItems(filterbrands);
  if (filterbrands) { } else {
  return 'loading...'
  }
  return (
    <div className="">
       {filteredList}
    </div>
    );
  }

Ошибка этой функции, когда она не получает данные из-за вложенного отображения.

elementContainsSearchString = (searchInput, element) => (searchInput ? element.catgeory_name.toLowerCase().includes(searchInput.toLowerCase()) : false);

Answer 1

result = itemList[0].options.filter((element) => this.elementContainsSearchString(searchInput, element));

Я надеюсь, что это решит вашу проблему.