React native multi select and delete items from state array

Question

I have stored the value locally using array, And I want to delete a single item by using Trash icon. But I need to delete the multi selected items from the array.

So I placed the button "Delete selected". But I am not able to select multiple items and I don't know how to write the functionality to delete multiple items. I'm new for the React Native so kindly help.

Here is my code

import React, { Component } from "react"
import { View, Text, TouchableOpacity, TouchableHighlight, TextInput, StyleSheet, FlatList,onRemove } from 'react-native'
import {Card,CardItem,Right} from 'native-base';
import Swipeout from 'react-native-swipeout'
import Icon from 'react-native-vector-icons/FontAwesome';
import MultiSelect from 'react-native-multiple-select';

class Screen3 extends Component{
    constructor(props) {
        super(props);
        this.state = {
          loading: false,
          firstname:[],
          onPress:true,
          unique1:[],
          unique:[],
          selectedItems : [],
          renderData:item,
          key1:0
          
        };
      }




    
      componentDidMount=()=>{
        const{navigation}=this.props
        const data=navigation.getParam('data','')
        const unique=data.filter((value,index,self)=>self.indexOf(value)===index)
        var key=0
        const unique1=[]
        for(var i=0;i<unique.length;i++){    
          key=key+1
          var result={"name":unique[i],"key":key}
          this.state.unique1.push(result)
          this.state.key1=this.state.key1+1
          this.setState({key1:this.state.key1})
          
    
        }
        
      }

      onPressHandler(item) {
        let renderData=[...this.state.renderData];
        for(let data of renderData){
          if(data.item==item){
            data.selected=(data.selected==null)?true:!data.selected;
            break;
          }
        }
        this.setState({renderData});
      }

      deleteItem = (item,index) => {
        console.log(item.name,index)
          this.state.unique=this.state.unique1
          let filtered=this.state.unique.filter((item1) => item1.key !== item.key)
          console.log(filtered)
          this.setState({unique1:filtered})

      }
   
  render(){
    return (
      





    <View>
    <Text style={styles.heading}>
        Manage Screen





  </Text>
  <TouchableOpacity style = {styles.Button}
               onPress={()=>this.deleteItem(item,index) } >
               
            <Text style={styles.button}>Delete selected</Text>        
            </TouchableOpacity> 


  <FlatList
  data={this.state.unique1}
  showsVerticalScrollIndicator={false}
  extraData={this.state.key1}
  style={{ marginTop: 16 }}
  renderItem={({ item, index }) => (
                            // <TouchableOpacity onPress={() => this.handleData(item)}>
  <TouchableOpacity onPress={() => this.onPressHandler(item,index)}>
  item!=null? 




  
 <Card
  style={{
    
            elevation: 10,

             marginBottom: 15,
   }}
  >




        <View style={{ flex: 1 }}></View>
    <CardItem bordered >
    style={
                  item.selected==true
                    ? {
                        padding: 10,
                        borderRadius: 5,
                        backgroundColor: '#000000',
                      }
                    : {
                        borderRadius: 5,
                        backgroundColor: '#a1a1a1',
                      }}
    <Text>{item.name}</Text>
    <Right style={{alignSelf:'flex-end' } }>
    <TouchableOpacity onPress={() => this.deleteItem(item,index)}>
    <Icon size={25} name={Platform.OS ==='android' ? "trash" : "ios-trash"} color="red"/>
    </TouchableOpacity>
    </Right>
    
    </CardItem>
    </Card>:null
     // </TouchableOpacity>
     )
      }
    />
    
     </View>

     )
   }
}


export default Screen3

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',





      },
      heading: {
        fontSize: 23,
        paddingVertical:80,
        textAlign: 'center',
        marginBottom: 30,
        marginTop: -40,

      },
      button:{
        width:('39%'),
        height:('4%'),
        alignItems:'center',
        borderWidth:1,
        borderRadius:2,
        marginTop:-80,
        marginHorizontal:10,
        marginLeft:110,
        justifyContent:'center',
        backgroundColor: '#b0c4de',
        padding: 9,
        fontSize: 15,
        margin: 15,
        height: 40,
        width: 160,
        alignItems: 'center'
      }
    }
)

JC_ JC_ · Accepted Answer · 2021-04-14T16:15:09

You would need a different function to delete multiple items and that function would call your deleteItem() function. A simple, but not so efficient way would be to loop through your selectedItems and find them in your data array and then remove each selected item with deleteItem(). You can then improve from there if it's not efficient enough.

React native multi select and delete items from state array

1 Answers