title: How can I remove an item from a FlatList and then update that list in React Native?
body: <p>I am making a To Do list app using React Native, where I add events to a FlatList and then have a button that removes that event once it it finished. So far this is what I have. It seems very hacky to me, but most of it works. 
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { StyleSheet, Text, View, TextInput,TouchableOpacity, FlatList} from 'react-native';
  
  
  export default class App extends React.Component {
  
    constructor(props){
      const data = [];
      super(props);
      this.state ={
        text: 'Enter activity here',
        data: data,
        color: true,
        currNum: 0,
      }
  
    }
    updateText(){
      this.setState({data:this.state.data.concat({key:this.state.text,index:this.state.currNum})});
      this.state.currNum++;
  
    }
    removeText(item){
      this.setState({data:this.state.data.pop(item.index)});
      this.state.currNum--;
  
    }
    
  
    render() {
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text&gt;&lt;/Text&gt;
          &lt;View style = {{flexDirection:'row',justifyContent:'flex-end'}}&gt;
            &lt;TextInput style = {{fontSize:30,borderColor:'black', flex:1, marginTop:20}} onChangeText = {(text) =&gt; this.setState({text})}value = {this.state.text}/&gt;
            &lt;TouchableOpacity style = {{marginTop:20}}onPress = {()=&gt;(this.updateText())}&gt;
              &lt;Text&gt;Add to list&lt;/Text&gt;
  
            &lt;/TouchableOpacity&gt;
  
          &lt;/View&gt;
  
          &lt;View style = {{flex:1, flexDirection:'row'}}&gt;
              &lt;FlatList
                data = {this.state.data}
                extraData = {this.state}
                renderItem = {({item}) =&gt; &lt;View&gt;&lt;Text style={styles.text} &gt;{item.key}&lt;/Text&gt;&lt;TouchableOpacity onPress = {() =&gt; this.removeText(item)}&gt;&lt;Text&gt;Remove&lt;/Text&gt;&lt;/TouchableOpacity&gt;&lt;/View&gt;}
                /&gt;
  
            &lt;/View&gt;
  
        &lt;/View&gt;
  
  
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I press the "remove" button, I delete an element from the list of data that the FlatList uses. However, whenever I do this I get an error saying "Tried to get frame for out of range index NaN". Is there a way for me to regularly update and remove a FlatList, and to re-render the FlatList once I have removed an item? I have tried using the extraDate prop, but it hasn't worked. I believe I am using it wrong though. Thank you for all the help.</p>