How can you delete specific element in a list in ReactNative(JS)

Question

I making a todo list where whatever I type get's pushed to an array. When I mapped the array, I put a trashcan button where they can remove that "Todo" list. I tried Splice method but it did not work. For example, I have a list that says:

"Buy Milk"

"Get Eggs"

If I want to remove "Get Eggs", it is removing "Buy Milk"(It is removing whatever it is on the top). Can someone help how I can achieve this. Here is my code(React native code):

removeList = (item) => {
  let val = this.state.noteList;
  let arr = val.splice(item, 1); // <= this is what I did but it is removing the first element of the list

  let complete = this.state.completedTask;
  complete.push(arr);
 this.setState({
 arr
})
};

Here is my Touchable Opacity:

<TouchableOpacity
  onPress={this.removeList}
  style={{
    height: deviceHeight / 10,
    width: deviceWidth / 6,
    backgroundColor: "#e6a25c",
    justifyContent: "center",
  }}
>
  <AntDesign
    name="checkcircleo"
    size={45}
    color="black"
    style={{ alignSelf: "center" }}
  />
</TouchableOpacity>;

This might seem a dumb question to you but I just can't seem to figure it out.

EDIT: I tried to do a Flat list instead of mapping but it's not working of me. Am i doing something wrong:

let newNote = [] // This is new NOTE and NOT THE COMPLETED SCREEN

newNote.push(

  <FlatList 
    data={this.state.noteList} 
    
    ListHeaderComponent={this.renderHeader}
    
    renderItem={({item,index}) => {
        <View style={{height:100,width:200,backgroundColor: "black"}}>
     
      <View style={styles.newBoxView}>
        <Text>{item}</Text>
      </View>
      </View>
     
    }}
  />
  
)

Answer 1

Try this:

removeList = (item) => {
  let val = this.state.noteList;
  let arr;

  for (let i = 0; i < val.length; i++) {
    if (val[i] === item) {
      arr = val.splice(i, 1);
    }
  }

  let complete = this.state.completedTask;
  complete.push(arr);
};

Answer 2

I found my answer so if anyone have the same issue has me, Here is the code:

`deleteNote = (index) => {
console.log(index)
 let arr = this.state.noteList;
 delete arr[index]
 this.setState({
  activeCounter: Number(this.state.activeCounter - 1)
 })
}`

Here is my Mapping code:

  `this.state.noteList.map((item,index) => 
   <View style={styles.createBox}>  
   <View style={{flex:4,justifyContent: 'center',backgroundColor: 
   "lightpink",}}>
    <Text  style={{textAlign:'center',fontSize:deviceWidth/20,}}>
    {item.trim()}
  
  </Text>
</View>
<TouchableOpacity key={index} onPress={() => this.deleteNote(index)} style={{flex:1,justifyContent: 'center'}}>
<AntDesign  name="checkcircleo" style={{alignSelf:'center',backgroundColor: "#e6a25c"}} size={deviceWidth/5} color="black" />
</TouchableOpacity>

)`

I hope this helps. This literally took me 1 week to figure and finally I figured it out.