React Native FlatList Delete Item

react native flatlist swipe to delete
react native flatlist remove item animation
react-native-swipeout
react native flatlist add item
react native flatlist footer
react native flatlist loading animation
react-native-swipe item
react native flatlist animation

I want to delete item from the FlatList. However, the solution from here is not working for my code. When I run my code, I am getting error such as 'index is not defined'.

I have yet to find other post regarding this issue so any help would be greatly appreciated.

Code snippet provided below:

   export default class FrCreateScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            //new timeSlots
            timeSlots: [],
        }
    }

    setEndTime = (event, appointmentEndTime, textEndTime) => {
        appointmentEndTime = appointmentEndTime || this.state.appointmentEndTime;
        textEndTime = textEndTime || moment(appointmentEndTime).format('h:mm a').toString();
        this.setState({
            showEndTime: Platform.OS === 'ios' ? true : false,
            appointmentEndTime,
            textEndTime,

            timeSlots: [
                ...this.state.timeSlots,
                {
                    apptdate: this.state.textAppointmentDate,
                    appttime: this.state.textAppointmentTime,
                    endTime: textEndTime,
                }
            ],
        });
    }

    deleteDateTime = (id) => {
        const filteredData = this.state.timeSlots.filter(item => item.id !== id);
        this.setState({ timeSlots: filteredData });
    }

    render() {
        return (
            <ScrollView>
                ...
                <View>
                    <FlatList
                        data={this.state.timeSlots}
                        keyExtractor={({ id }, index) => index.toString()}
                        renderItem={({ item }) => {
                            return (
                                <View style={styles.containerList}>
                                    ...
                                        <TouchableOpacity onPress={() => this.deleteDateTime(index)}>
                                            <Feather name="trash" style={styles.icon} />
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            );
                        }}
                    />
                </View>
            </ScrollView>
        )
    };
};

Screenshot below:

I think you need to add index inside renderItem { item, index }

renderItem = {({ item, index }) => {
    return (
        <View style={styles.containerList}>
            <TouchableOpacity onPress={() => this.deleteDateTime(index)}>
                <Feather name="trash" style={styles.icon} />
            </TouchableOpacity>
        </View>
    );
}}

How to remove a item/index from a FlatList in react native?, deleteItemById = id => { const filteredData = this.state.data.filter(item => item.id !== id) this.setState({ data: filteredData }); } render() { return� If you wish to skip, filter, remove, or omit an item from your FlatList, add some conditional logic to your <FlatListItem /> component’s render method so that it returns nothing <></> when passed a particular prop. For example, take a look at my GitHub gist below.

While rendering in map function , it provides the index too, so try adding that.

renderItem={({ item,index }) => {
                            return (
                                <View style={styles.containerList}>
                                    ...
                                        <TouchableOpacity onPress={() => this.deleteDateTime(index)}>
                                            <Feather name="trash" style={styles.icon} />
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            );
                        }}

Hope it helps

Answer: How to remove a item/index from a FlatList in react native , Open App.js in any code editor and replace the code with the following code /* Example to add or remove flatlist item with animation*/� Add or Remove FlatList Item. In this post, we will see How to Add or Remove FlatList Item with Animation. FlatList is the most common thing which you use in the React Native development so here is a basic animation example that will help you to animate your FlatList rendering.

ok fixed. on touchable onPress, the argument should be 'item.index' instead of 'index'.

here's the correct code:

renderItem={({ item,index }) => {
                            return (
                                <View style={styles.containerList}>
                                    ...
                                        <TouchableOpacity onPress={() => this.deleteDateTime(item.index)}>
                                            <Feather name="trash" style={styles.icon} />
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            );
                        }}

How to Add or Remove FlatList Item with Animation, I'm learning React Native in a club I'm in, and I'm trying to create a To-Do list app. I have it set up where I enter data and have get rendered to … Without setting this prop, FlatList would not know it needs to re-render any items because it is a PureComponent and the prop comparison will not show any changes. keyExtractor tells the list to use the id s for the react keys instead of the default key property.

How do I (properly) delete an item from a FlatList? : reactnative, I have FlatList to show Image gallery, and I have a delete button to remove an item from FlatList, I have used both splice and filter methods to� onSelectItem (item) will fire when the item is pressed. onDeleteItem (item) will fire when the item is swipe-right deleted. onAddItem () will fire when the plus item in the status bar is pressed. These will then effect a scene change or a data update as needed.

Delete Flatlist item not rendering the component, react native flatlist remove item animation react-native flatlist numcolumns react native flatlist add item react native flatlist selected item flatlist header in react� To Make a React Native App. Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to

Remove item from FlatList in react native, Having trouble working with FlatList's in React Native? either Redux or in React's built-in component state and you want to remove the item? React Native Create Delete Functionality From Scratch is today’s leading topic.We build a simple functionality where users can add and remove places client side. It does not affect the server side because there is no backend.

Comments
  • Hi, I tried adding index inside renderItem, and it solved the error issue. However, it fails to delete the item.
  • Hi, I tried adding index inside renderItem, and it solved the error issue. However, it fails to delete the item.