Jak odczytać właściwość wczytanego obiektu?

W komponecie chce odczytać id, ale dostaję undefined. Jak odczytać

<View style={styles.container}>
    <FlatList
      numColumns={4}
      data={hours}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (<HoursComponent {... item} />)} />

const HoursComponent = ({id, time}) => {
    const [bgColor, setBgColor] = useState('');
    const [markedHour, setMarkedHour] = useState('');

    console.log(typeof id);

    const onPress = () => {
        if(bgColor == '') {
            console.log("Time " + time + " ID " + id)
            setBgColor(Colors.sandy)
        }else{
            setBgColor('#00000000');
        }
    }

    const TimewithoutLast3 = time.slice(0, -3);
    return (
      <TouchableOpacity style={{...styles.rootContainer, backgroundColor: bgColor}}>
          <Text style={styles.buttonText} onPress={onPress}>{TimewithoutLast3}</Text>
      </TouchableOpacity>
    );
}

W backend godzina jest zdefiniowana tak

Hours first = new Hours(1l, LocalTime.of(9, 00));

Zrób

const HoursComponent = (props) => {
    console.log(props); 

    // [...]
}

I zobacz co dostajesz w properties.

dostaje [object Object]

dostaje [object Object]

To masz tablice z jednym elementem. Teraz zrób console.log(props[0]);

Dev007 napisał(a):

dostaje [object Object]

To spróbuj zrobić

console.log(JSON.stringify(props));

Mam jeszcze pytanie w tej chwili jak wybieram jedną z godzin oznacza mi się onna kolorm. Propem w tym że jak raz oznaczę/wybiorę godzinę, następnie wybiorę inną i znów chce wybrać tą początkową to już nie mogę. Nie mogę ani "nacisnąć" tej godziny, nie dzieje się nic w logach ani nie zmiena się kolor. W czym jest problem ?

<View style={styles.container}>
    <FlatList
      numColumns={4}
      data={hours}

czym jest hours? Na tym poziomie przydałoby się zrobić console.log(hours)

ogólnie mam wrażenie, że gdybyś używał console.log (albo debuggera, niektórzy gardzą console.log i preferują debugger), to sam byś rozwikłał swój problem. Po nitce do kłębka. Patrzysz, gdzie masz jakieś wartości, skąd one się biorą i gdzie jest problem. Trzeba aktywnie podchodzić, być jak detektyw. Jeśli umiesz przekazywać wartości w dół, to powinieneś umieć też sprawdzać wartości na kolejnych poziomach. Bo gdzieś może być błąd (w ogóle co dostajesz z backendu? Dostajesz prawidłowe dane?)

Tak samo tutaj:

 renderItem={({ item }) => (<HoursComponent {... item} />)} />

jak wygląda item na tym poziomie?

A nie da rady tak

let lista=Object.getOwnPropertyNames(item);

?