ERROR ReferenceError: Property ‘index’ doesn’t exist
import { Text, View, Image, ScrollView, Pressable } from ‘react-native’;
import Header from ‘…/components/Header’;
import Footer from ‘…/components/Footer’;
import { gStyle } from ‘…/styles/style’;
import { firebase } from ‘…/Firebase/firebase’;
import ‘firebase/compat/auth’;
import ‘firebase/compat/database’;
import ‘firebase/compat/firestore’;
import React, {useState, useEffect} from ‘react’;
import { useNavigation } from ‘@react-navigation/native’;
import BookedMK from ‘…/components/BookedMK’;



export default function Profile() {
const navigation = useNavigation();
const [userId, setUserId]=useState(null);
const [userData, setUserData] = useState(null);
const [bookedMK, setBookedMK] = useState([]);

useEffect(()=>{
const unsubscribe=firebase.auth().onAuthStateChanged((user)=>{
if(user){
setUserId(user.uid);
}else{
setUserId(null);
}
});
return()=>unsubscribe();
},[])

useEffect(() => {
if(userId){
const userRef=firebase.database().ref(users/${userId});
userRef.on(‘value’, snapshot=>{
const data = snapshot.val();
setUserData(data);
});

const bookedMKRef = firebase.database().ref(users/${userId}/bookedMK);
bookedMKRef.on(‘value’, (snapshot) => {
const data = snapshot.val();
if (data) {
const mk = Object.entries(data).map(([index, mk])=>({…mk, index}));
setBookedMK(mk)
} else {
setBookedMK([]);
}
});

// Cleanup function which will remove the listeners when the component is unmounted
return () => {
userRef.off();
bookedMKRef.off();
};
}
},[userId]);

const handleDeleteBookedMK=(mkIndex)=>{
const updatedBookedMK=bookedMK.filter(mk=>mk.index !==mkIndex);
setBookedMK(updatedBookedMK);
}

const handleLogOut = async () => {
try {
await firebase.auth().signOut();
navigation.navigate(‘Auth’);
} catch (error) {
console.error(error);
}
};

return (
<View>
<ScrollView>
<Header/>
<View style={gStyle.main}>
<View style={gStyle.ProfileBox}>
<View style={gStyle.ProfileGreeting}>
<Text style={gStyle.ProfileName}>{userData?.name},</Text>
<Text style={gStyle.ProfileHello}>Добро пожаловать в{‘\n’}личный кабинет</Text>
</View>
<View style={gStyle.ProfileBlock}>
<View style={gStyle.ProfileChain}>
<Text style={gStyle.ProfileTitle}>Имя</Text>
<View style={gStyle.ProfileInfo}>
<Text style={gStyle.ProfileValue}>{userData?.name}</Text>
</View>
</View>
<View style={gStyle.ProfileChain}>
<Text style={gStyle.ProfileTitle}>Фамилия</Text>
<View style={gStyle.ProfileInfo}>
<Text style={gStyle.ProfileValue}>{userData?.surname}</Text>
</View>
</View>
<View style={gStyle.ProfileChain}>
<Text style={gStyle.ProfileTitle}>Электронная почта</Text>
<View style={gStyle.ProfileInfo}>
<Text style={gStyle.ProfileValue}>{userData?.email}</Text>
</View>
</View>
<View style={gStyle.ProfileChain}>
<Text style={gStyle.ProfileTitle}>Номер телефона</Text>
<View style={gStyle.ProfileInfo}>
<Text style={gStyle.ProfileValue}>{userData?.phone}</Text>
</View>
</View>
<Pressable style={gStyle.logout}
onPress={handleLogOut}
>
<Text style={gStyle.gobacktxt}>Выйти</Text>
</Pressable>
</View>
</View>
{bookedMK.map((mk)=>(
<BookedMK
key={mk.index}
mk={mk}
userId={userId}
onDelete={handleDeleteBookedMK}
/>
))}
</View>
<Footer/>
</ScrollView>
</View>

);
}


import { Text, View, Image, Pressable } from ‘react-native’;
import { gStyle } from ‘…/styles/style’;
import { firebase } from ‘…/Firebase/firebase’;
import React, {useState, useEffect} from ‘react’;

const options = { day: ‘numeric’, month: ‘long’, hour: ‘numeric’, minute: ‘numeric’ };

export default function BookedMK(props) {
const {mk, userId, onDelete} = props;
const handleDeleteBookedMK=()=>{
const userRef=firebase.database().ref(users/${userId}/bookedMK/${mk.index});
userRef.remove().then(()=>{
onDelete(mk.index);
}).catch((error)=>{
console.error(error);
})
}
//const [userId, setUserId]=useState(null);
//const [userData, setUserData] = useState(null);
//const [bookedMK, setBookedMK] = useState([]);
//useEffect(()=>{
//const unsubscribe=firebase.auth().onAuthStateChanged((user)=>{
//if(user){
//setUserId(user.uid);
//}else{
//setUserId(null);
//}
//});
//return()=>unsubscribe();
//},[])
//useEffect(() => {
//if(userId){
// const userRef=firebase.database().ref(users/${userId});
// userRef.on(‘value’, snapshot=>{
// const data = snapshot.val();
// setUserData(data);
//});
//const bookedMKRef = firebase.database().ref(users/${userId}/bookedMK);
// bookedMKRef.on(‘value’, snapshot => {
// const data = snapshot.val();
// if (data) {
// const mk = Object.values(data);
// setBookedMK([]);
// setBookedMK(mk)
// } else {
// setBookedMK([]);
// }
// });
// return () => {
// userRef.off();
// bookedMKRef.off();
// };
// }
// },[userId]);

return (
<View style={gStyle.ProfilePaidMK}>
<Text style={gStyle.ProfilePaid}>Забронированные{‘\n’}мастер-классы</Text>
<Text style={gStyle.ProfileLine}></Text>
<View key={index} style={gStyle.ProfileDetails}>
<Image source={{uri:mk.image}} style={gStyle.ProfileImg}/>
<View style={gStyle.ProfileDescription}>
<Text style={gStyle.ProfileTitleOfMK}>{mk.name}</Text>
<Text style={gStyle.ProfileDate}>{new Date(mk.time?.seconds * 1000).toLocaleTimeString([], options)}</Text>
<Text style={gStyle.ProfilePrice}>Цена: {mk.price} Р.</Text>
</View>
</View>
<Pressable
onPress={handleDeleteBookedMK}
>
<Text>Убрать</Text>
</Pressable>
<Text style={gStyle.ProfileLine}></Text>
</View>

);
}