Deleting a ListView item in React Native
<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>