Question

5

How to remove a item/index from a FlatList in react native?

rated 0 times [ 10] [ 5] / answers: 1 / hits: 33823 / 6 Years ago, wed, december 19, 2018, 12:00:00

I have a data which is rendered as view and came across a issue on how to remove that particular index which is swiped

I have used FlatList as follows

render() {

this.leftOpenValue =  Dimensions.get('window').width;

this.rightOpenValue = -Dimensions.get('window').width;



return (   



     <FlatList 

            data = {data}  

            keyExtractor = {data => data.id}                

            renderItem={ ({item}) => (



                <View style={styles.container}>

                    <SwipeView            

                        disableSwipeToRight = {false}

                        renderVisibleContent={() => 

                            <View>

                                <Text style={styles.text}> {item.title} </Text>     // This repeats 9 times (9 Index)              

                            </View>          

                        }

                        renderRightView={() => (

                            <View style={{flex:1, justifyContent: 'flex-end', alignItems: 'center', backgroundColor: 'red'}}>



                            </View>

                        )}



                        leftOpenValue = {this.leftOpenValue}

                        rightOpenValue = {this.rightOpenValue}

                        onSwipedLeft={() => alert(deleted)}

                        swipeDuration = {300}

                        swipeToOpenPercent = {40}

                        disableSwipeToRight = {true}

                    />

                </View>  



            )}

    />

);

I have used Swipeview to swipe (react-native-swipeview) and delete the index in flatlist

I have an issue on how to remove an item from flatList

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deanna

Add To Favorites

Follow

Total Points: 84

Total Questions: 86

Total Answers: 107

Location: Cyprus

Member since Wed, Dec 8, 2021

3 Years ago

deanna questions

1 CastError: Cast to ObjectId failed for value XXXXXXXXXX (type string) at path _id for model XXXX

Thu, Apr 21, 22, 00:00, 2 Years ago

1 Next.js behavior on back button pressed

Mon, Sep 6, 21, 00:00, 3 Years ago

1 React-Router + Typescript error while wrapping component with Router No overload matches this call

Sat, Feb 13, 21, 00:00, 3 Years ago

1 Use the webpack asset module with a custom output filename

Sun, Jan 17, 21, 00:00, 3 Years ago

1 React js random color

Sun, Nov 15, 20, 00:00, 4 Years ago

View All

answered 6 Years ago aubreeg · Accepted Answer

General pattern is to pass a uniquely identifiable id (key, index, etc...) to your delete handler and filter your data on values that don't equal that key. This returns a new array without that entry to store in state.

deleteItemById = id => {

  const filteredData = this.state.data.filter(item => item.id !== id);

  this.setState({ data: filteredData });

}



render() {

  ...



  return (   

    <FlatList 

      data={data} // Assuming this is `this.state.data`

      keyExtractor={({item}) => item.id}                

      renderItem={({item}) => (

        <View style={styles.container}>

          <SwipeView

            ...

            onSwipedLeft={() => this.deleteItemById(item.id)}

            ...

          />

        </View>  

      )}

    />

  );

}

Using a curried handler. This saves using an anonymous callback by setting the callback to be an event handler with the id enclosed in the function scope.

deleteItemById = id => () => {

  const filteredData = this.state.data.filter(item => item.id !== id);

  this.setState({ data: filteredData });

}



render() {

  ...



  return (   

    <FlatList 

      data={data} // Assuming this is `this.state.data`

      keyExtractor={({item}) => item.id}                

      renderItem={({item}) => (

        <View style={styles.container}>

          <SwipeView

            ...

            onSwipedLeft={this.deleteItemById(item.id)}

            ...

          />

        </View>  

      )}

    />

  );

}