title: Deleting a ListView item in React Native
body: <p>I am having difficulty removing a row from a ListView. It removes the last element of the list, no matter which on is clicked. <strong>However, console.log tells me that the array has correctly deleted the item, but it renders wrongly...</strong> There are a few solutions already on the internet, but none have helped me solve my problem. </p>
  
  <p><a href="https://i.stack.imgur.com/MLSTf.gif" rel="nofollow noreferrer">GIF of my problem</a></p>
  
  <p><strong>Logs</strong></p>
  
  <p>As you can see, it actually does remove the right item, but displays the wrong array?</p>
  
  <p><code>Nov  6 22:18:39 Viviennes-Air reminders[25992] &lt;Notice&gt;: { rowID: '0' }
  Nov  6 22:18:39 Viviennes-Air reminders[25992] &lt;Notice&gt;: [ 'testing 2', 'testing 3' ]
  Nov  6 22:18:39 Viviennes-Air reminders[25992] &lt;Notice&gt;: { _rowHasChanged: [Function: rowHasChanged],
        _getRowData: [Function: defaultGetRowData],
        _sectionHeaderHasChanged: [Function],
        _getSectionHeaderData: [Function: defaultGetSectionHeaderData],
        _dataBlob: { s1: [ 'testing 2', 'testing 3' ] },
        _dirtyRows: [ [ false, false, true ] ],
        _dirtySections: [ false ],
        _cachedRowCount: 3,
        rowIdentities: [ [ '0', '1', '2' ] ],
        sectionIdentities: [ 's1' ] }</code></p>
  
  <p>Here's my constructor:</p>
  
  <pre><code>constructor(props) {
  super(props);
  const ds = new ListView.DataSource({rowHasChanged: (r1, r2) =&gt; r1 !== r2});
  this.state = {
    items: [],
    dataSource: ds.cloneWithRows([]),
    newItem: "",
  };}
  </code></pre>
  
  <p>The ListView:</p>
  
  <pre><code>&lt;ListView
          style={styles.container}
          dataSource={this.state.dataSource}
          enableEmptySections={true}
          renderRow={(data, sectionID, rowID) =&gt; this.renderRow(data, sectionID, rowID)}
          renderSeparator={(sectionId, rowId) =&gt; &lt;View key={rowId} style={styles.separator}/&gt;}
        /&gt;
  </code></pre>
  
  <p>The renderRow function:</p>
  
  <pre><code>renderRow(data, sectionID, rowID){
  console.log("ITEM: ", data)
  return &lt;TouchableOpacity style={styles.listItem} onPress={() =&gt; this._delete({rowID})}
              activeOpacity={0.1}&gt;
              &lt;Text style={styles.listItemText}&gt;{data}&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;}
  </code></pre>
  
  <p>And finally, the delete function:</p>
  
  <pre><code>_delete(index){
    this.state.items.splice(index, 1)
    console.log(index)
    console.log(this.state.items)
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.state.items)
    })
    console.log(this.state.dataSource)}
  </code></pre>
  
  <p>I have been trying to figure this our for 2 hours now, and I'm pretty sure I'm doing everything correctly.</p>