I'm re-learning React native as the back isn't dev yet I'm starting fake data, so in my Modal I'm trying to put in my state future api data
import React,{useEffect,useState} from "react";
import { Modal, StyleSheet,Text,TouchableOpacity, ScrollView,View,Image } from "react-native";
const ModalInfo = (props) => {
const {toggleVisibility,visibility} = props
const [genre,setGenre] = useState(null);
useEffect(() => {
setGenre({
id:"genreID",
name:"Les Tops",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at ullamcorper eros.",
icons:[{url:"https://t.scdn.co/media/derived/toplists_11160599e6a04ac5d6f2757f5511778f_0_0_275_275.jpg"}],
})
},[]);
return (
<Modal animationType="slide" transparent={true} visible={visibility}>
<View style={styles.modalView}>
<View style={styles.modalHeader}>
{
genre && genre.icons ? <Image source={{uri: `${genre.icons[0].url}`}} style={styles.images} /> : null
}
{
genre && genre.name ? <Text style={styles.modalText}>{genre.name}</Text> : null
}
</View>
<ScrollView style={styles.modalScroll}>
{
genre && genre.description ? <Text style={styles.modalText}>{genre.description}</Text> : null
}
</ScrollView>
<View style={styles.modalFooter}>
<TouchableOpacity onPress={()=>{toggleVisibility()}} style={styles.btn}>
<Text style={styles.btnTxt}>Rejoindre</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
);
};
export default ModalInfo;
But somehow genre is still undefined and if I don't pu ternary I've an error saying undefined.
UPDATE: when I passed something else than an Object to setGenre It work's