How make re-render Flatlist React Native?

Question

I am doing a search filter for an TodoList. In todoList I'm using a function to render items called renderItem , but I don't know how to re-render, when I write the searched item in the inputText

Can someone help me?

StaticContainer.js

import * as React from 'react';
import { FlatList, Text, View, StyleSheet, TouchableOpacity, TextInput } from 'react-native';

export default class StaticCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filter: '',
      name: '',
    }
    this.renderItem = this.renderItem.bind(this)
    this.setState = this.setState.bind(this)
  }
  setState(text){
    this.state.filter = text
    alert(JSON.stringify(this.state.filter))
    this.renderItem
  }
  renderItem(obj){
    if (this.state.filter != '') {
      if (obj.item.desc.startsWith(this.state.filter)) {
        console.log(typeof(obj.item.desc));
        let key = obj.item.key      
        return(
          <TouchableOpacity style={styles.container} onPress={()=> this.props.acessarDados(key)}>
            <Text style={styles.cel}>{obj.item.desc}</Text>
          </TouchableOpacity>
        )
      }else{

      }
    }else{
      let key = obj.item.key      
      return(
        <TouchableOpacity style={styles.container} onPress={()=> this.props.acessarDados(key)}>
          <Text style={styles.cel}>{obj.item.desc}</Text>
        </TouchableOpacity>
      )
    }

    }
    render() {
      return (
        <View>
          <FlatList style={styles.lista} data={this.props.itens} renderItem={this.renderItem}/>
          <TextInput style={styles.input} onChangeText={(text) =>{this.setState(text)}}/>
        </View>
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      justifyContent: 'center',
    },
    lista: {
      marginTop: 90,
    },
    cel:{
      paddingVertical: 20,
      backgroundColor: '#E4EBEE',
      fontSize: 18,
      marginBottom: 2,
    },
    inputView:{
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    input:{
      backgroundColor: '#fff',
      borderColor: '#ccc',
      borderWidth: 3,
      padding: 15,
      margin:20,
      color: '#3d3d3d'
    }
  });

Answer 1

you have to filter the data that you pass to the flatlist

state = {todoList: props.items  } 

filterTodo = (inputText) => {
  const filteredList = this.state.todolist.filter(todo => todo.includes(inputText));
  this.setState({todolist: filteredList })
}

then the data for your flatlist becomes this.state.todolist. just to be clear the render Item is the component that get rendered from each data point in the data array, logic for the whole list should not be done there, if you don't want to show any data it should be a ternary in the data prop

data={someCondition? this.props.todolist: [] }

I think you have a typo in the flatlist data={this.props.itens}, this will work for a simple list if its a really big list you'll need a more optimized backend search.