TypeError: undefined is not an object (evaluating 'item.id.toString') on React Native

Question

I've been experiencing this error. I also checked out other related problems similar to this but it still not working.

Here is my code:

Create.js

const create = ({navigation, user}) => {

const [newcreate, setNewcreate] = useState([]);

const findNewcreate = async () => {
        const results = await AsyncStorage.getItem('newcreate');
        if (results !== null) setNewcreate(JSON.parse(results));
    }

    useEffect(() => {
        findNewcreate();
    }, []);
    
    const toClose = () => setVisible(false);

    const toSubmit = async (createName, createCode) => {
        const creates = {id: Date.now(), createName, createCode};
        const updatedCreate = [...newcreate, creates];
        setNewcreate(updatedCreate)
        await AsyncStorage.setItem('newcreate', JSON.stringify(updatedCreate))
    };

    const submitDetails = () => {
        if (!createName.trim() && !createCode.trim()) return toClose();
        toSubmit(createName, createCode);
        setCreateName("");
        setCreateCode("");
        toClose();
    };

return (
<FlatList
                data={newcreate}
                keyExtractor={(item) => item.id.toString()}
                renderItem={({item}) => <AdddedItems item={item} />} />

)

AddedItems.js

const AdddedItems = ({item}) => {
    const {createName, createCode} = item;

    return (
        <View>
            <Text>{createName}</Text>
            <Text>{createCode}</Text>

        </View>
    )
}

Btw, I tried removing the .id in the keyExtractor and it looks like this: keyExtractor={(item) => item.toString()} and it partially works. But I dont want to remove the id I just tried it. Is it okay to remove the id? still it generates another error that is not related to this.

Thank you in advance!!

Answer 1

Please try this for any flatlist. this is work if you get data or not.

<FlatList
            data={newcreate}
            keyExtractor={(_,i) => i.toString()}
            renderItem={({item}) => <AdddedItems item={item} />} />