CODEWITHSUNDEEP
react-native
Yellow Clock
Yellow Clock

Reputation: 465

Anyone knows why I have this error: undefined is not an object(evaluating 'messages.filter')

Why am I getting the following error

undefined is not an object(evaluating 'messages.filter')

with the following code?

    import React,{useState} from 'react';
    import { FlatList, StyleSheet, View } from 'react-native'
    import ListItem from './../components/ListItem';
    import ListItemSeparator from './../components/ListItemSeparator';
    import ListItemDeleteAction from './../components/ListItemDeleteAction';
    
    const initialMessages =[
        {id:1 ,userName:"Anna",description:"An awesome girl"},
        {id:2 ,userName:"Lucy",description:"A best people"},
        {id:3 ,userName:"Jack",description:"Very good guy"}
    ]
    
    
    function MessagesScreen(props) {
        const[messages,setMessages] = useState(initialMessages);
       
    
        const handleDelete = message =>{
           const newMessages = messages.filter(m => m.id !== message.id);
           setMessages(newMessages);
        }
        return (
            <View>
               <FlatList
               data ={initialMessages}
               keyExtractor = {message => message.id.toString()}
               renderItem ={({item})=>(
                   <ListItem
                   image = {require('../assets/me.jpg')}
                   title = {item.userName}
                   subTitle ={item.description}
                   onPress ={()=>console.log(item)}
                   renderRightActions ={()=>(
                       <ListItemDeleteAction onPress={()=>handleDelete(item)}/>
                   )}
                   />
               )}
               ItemSeparatorComponent ={ListItemSeparator}
               /> 
            </View>
        );
    }
    
    const styles = StyleSheet.create({
        
    })
    
    export default MessagesScreen;

Upvotes: 0

Views: 36

Answers (1)

docmurloc
docmurloc

Reputation: 1239

You give the wrong element in handleDelete.

The argument 'item' in your renderItem is an element of your 'initialMessages' not your array.

undefined is not an object(evaluating 'messages.filter')

This error means that you are trying to call filter() on a json. This function does not exist, so it is undefined.

Try this code.

<ListItemDeleteAction onPress={()=>handleDelete(messages)}/>

Upvotes: 1

Related Questions