react native undefined is not an object, but I defined it - reactjs

Question

Hi so I want to pass function to a functional component to execute. But i Get error undefined is not an object (evaluating '_this2.deleteChat')
Where I made mistake?
I often get this problem when using class components.
CLASS COMPONENT:
constructor(props) {
super(props);
this.state = { chats: [], usersData: [], userIDs: [], deletedChat: false };
this.getChats = this.getChats.bind(this);
this.deleteChat = this.deleteChat.bind(this);//DEFINED
}
deleteChat = chatID => {
const myId = firebase.auth().currentUser.uid;
let deleteData = firebase
.database()
.ref('/chats/' + chatID + '/members/')
.remove(myId);
this.setState({ ...this.state, deleteChat: !this.state.deletedChat });
};
...
return(
<TouchableHighlight
style={{ width: 65, height: 50 }}
title={data}
onPress={() =>
TwoButtonAlert(
'Do you realy wish to leave conversation?',
this.deleteChat(id),
)
}
>
...
My functional component
import React, { useState } from 'react';
import { Alert } from 'react-native';
const createTwoButtonAlert = (title, deleteChat) =>
Alert.alert(
title,
'My Alert Msg',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{ text: 'OK', onPress: () => deleteChat },
],
{ cancelable: false },
);
export default createTwoButtonAlert;
I have similar method but it runs in componentDidMount() and it works.
EXAMPLE:
componentDidMount() {
var _userId = firebase.auth().currentUser.uid;
this.getChats(_userId);
}
getChats = _userId => {
let data;
let usersData = [];
var readedData = firebase
.database()
.ref('chats')
.orderByChild('members/' + _userId)
.equalTo(true);
readedData.once('value', snapshot => {
data = snapshot.val();
// const temp = { ...data };
const filtered = Object.entries(data).map(([key, value]) =>
Object.keys(value)
.filter(value => value !== _userId)
.filter(value => value !== 'members')
.filter(value => value !== 'messages'),
);
this.setState({ chats: data, usersData: usersData, userIDs: filtered });
return true;
});
};

Answer 1

Two issues
You invoke deleteChat immediately when you pass it as this.deleteChat(id), which returns undefined since it is a VOID return
Attach it incorrectly in createTwoButtonAlert, i.e. () => deleteChat is improper syntax
Solution, convert to curried function to enclose the id in callback scope
deleteChat = chatID => () => {...
This will invoke the function immediately still, but this returns a function to be used as the callback.
Use the correct syntax to assign callback
onPress: () => deleteChat() // proxied callback
or
onPress: deleteChat // directly set the callback