i am using a class component and i declared multiple function in same class and try to call one function to another but they show me an error like undefined is not a function
My coding structure is like
class UserList extends Component { constructor(props) { super(props); this.state = { user_data:[], }; } componentDidMount() { //some other code } logOut=(ext_id)=> { //logout code } UserItem (props,{MainScreen}){ const navigation = useNavigation(); const [name, setName] = useState(); const [image_name, setImg] = useState(); fetch('https://example.com/acc_data.php', { method: 'POST', mode: 'no-cors', headers: {'Content-Type': 'application/json', }, body: JSON.stringify({'user_id': props.one,'key':props.three,'api_key':`********` }) }).then((response) => response.json()) .then((json) => { console.log(json); setName(json.business_name); setImg(json.logo); }).catch((err) => { console.log(err); }); return(<TouchableRipple onPress={() => {navigation.navigate('MainScreen',{one:props.one,two:props.two,three:props.three})}} rippleColor="rgba(0, 0, 0, .1)" centered={true} borderless={true} style={styles.ripple}><Card style={{marginHorizontal:20, marginVertical:10, padding:8, flexDirection:'row'}}><View style={{flexDirection:'row'}}><Image style={{height:80,width:80,borderRadius:8}} source={{ uri:`https://tridevmart.com/web_app/shop_logo/${image_name}` }} /><View style={{flex:1}}><Text numberOfLines = {1} style={{fontSize:24,margin:10}}>{name}</Text> <View style={{flexDirection:'row',justifyContent:'space-between'}}><Text numberOfLines={5} style={{fontSize:16,marginHorizontal:10,flex:1,color:`#ccc`}}>Income : 2654</Text><Button icon="logout" mode="contained" mode="text" onPress={() => this.logOut(props.ext)}>Logout</Button></View></View></View></Card></TouchableRipple> ); } list = () => { return this.state.user_data.map((element) => { return (<this.UserItem key={element.ext_id} ext={element.ext_id} one={element.one} two={element.two} three={element.three}/> ); }); }; render(){ return(<SafeAreaView style={{ flex: 1 }}><View style={styles.mainBox}> {this.list()}<Button mode="contained" style={styles.inputButton} onPress={() => this.props.navigation.navigate('LoginScreen')}>+ Add More Account</Button></View></SafeAreaView> ); }}in this coding i am trying to call logOut() inside a onPress attribute of UserItem component
So plese hel me to find out a exect solution. i am new in react native so please help me to how can i solve this and how can i proceed my futher work