Can You please tell me why data from GitHub Api don't display as children in component ?UserData in object containing typed user details extracted from GitHub API. Childern which I want to display is certain feature of user like id, etc.
Below You can find main component rendered on the screen and two styled components which should display the data .
Appreciate Your help
interface IProps { navigation: StackNavigationProp<BottomTabParamList, "SearchScreen">;}export const TabOneScreen: FC<IProps> = ({ navigation }) => { const [userName, setUserName] = useState(""); const [userData, setUserData] = useState(); const [isLoading, setIsLoading] = useState(false); const handleUserName = (text: string) => { setUserName(text); }; useEffect(() => { setIsLoading(true); const fetchData = setTimeout(() => { fetch(`https://api.github.com/users/${userName}`) .then((response) => response.json()) .then((data) => { setIsLoading(false); setUserData(data); }); }, 500); return () => { clearTimeout(fetchData); }; }, [userName]); console.log(userData?.id); return (<StyledContainer><SearchField value={userName} onChangeText={handleUserName} /><Loading isLoading={isLoading} /><DetailsField backgroundColor={colors.whiteColor}><DetailsData> {userData && userData.id} {userData && userData.location} {userData && userData.created_at}</DetailsData></DetailsField> {userData && userData.id}<Button color={colors.buttonBackground} title="Show more" onPress={() => { navigation.navigate("DetailsScreen"); }} /></StyledContainer> );}; import React, { FC } from "react";import { StyledDetailsField } from "../DetailsField/styles";export interface SearchFieldProps { backgroundColor: string;}export const DetailsField: FC<SearchFieldProps> = ({ backgroundColor }) => { return <StyledDetailsField {...{ backgroundColor }} />;}; import React, { FC } from "react";import { StyledDetailsWrapper, StyledDetail } from "./styles";interface DetailsProps { color?: string;}export const DetailsData: FC<DetailsProps> = ({ children, color }) => { return (<StyledDetailsWrapper {...{ color }}><StyledDetail>{children}</StyledDetail></StyledDetailsWrapper> );};