Мой метод рендеринга в реакции не позволит мне отфильтровать данные из вызова axios, а проверка на ноль не работает. Кажется, легко исправить?

Question

У меня есть большой список данных, которые я получаю от вызова axios, и я хочу иметь возможность быстро фильтровать мои данные и показывать только то, что включено в панель поиска. По какой-то причине, когда я пытаюсь установить свой реквизит в переменную, а затем фильтровать его, я говорю, что он не определен. Поэтому я попытался сделать простую проверку на ноль, а затем сделать мой JS, но он все еще не работает. Я думаю, что частью проблемы является время, в которое данные вызывают, и метод рендеринга выполняет фильтрацию быстро? Заранее спасибо!

class App extends Component {

   constructor(){
     super();
     this.state={
       filteredData: null,
       input: ''
     };
   }

   componentWillMount = () => {
    this.props.GetAllData();
   }

   onChange=(txt)=>{
     this.setState({input: txt});
   }

   render() {

     const filteredData = !!this.props.people ? this.props.people.filter(card =>{
        return card.name.toUpperCase.includes(this.state.input.toUpperCase())
        }) : null

   return(

    <SearchBar cards={this.props.people} inputTxt={this.onChange}/>
    {!!this.props.people ? this.props.people.map(i => <Card person={i} key={i.created}/>) : null}
)
   }