Reputation: 892
Why does data from GitHub API don't display as children
in Text
component called StyledDetail, created in styled components? Main screen which renders data is TabOneScreen , 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 StyledDetail component, and StyledDetailsWrapper.
import React, { FC } from "react";
import { StyledDetailsWrapper, StyledDetail } from "./styles";
interface DetailsProps {
selectionColor?: string | undefined;
}
export const DetailsData: FC<DetailsProps> = ({ children, selectionColor }) => {
return (
<StyledDetailsWrapper>
<StyledDetail selectionColor={selectionColor}>{children}</StyledDetail>
</StyledDetailsWrapper>
);
};
import { View, Text } from "react-native";
import styled from "styled-components/native";
export const StyledDetailsWrapper = styled(View)`
margin: 10px;
text-align: center;
height: 20px;
width: 100px;
`;
export const StyledDetail = styled(Text)`
${(props: { selectionColor: string | undefined }) => props.selectionColor};
here is link to github repo : https://github.com/marcinb1986/database/tree/main/components
Appreciate Your help
Upvotes: 2
Views: 746
Reputation: 6184
In case StyledDetail
is a Text
component (i.e. const StyledDetail = styled.Text ...
) you can either
Display all data by combining it into a template string:
<DetailsData>
{userData && `${userData.id}, ${userData.location}, ${userData.created_at}`}
</DetailsData>
Use StyledDetail
inside TabOneScreen
to display each text individually as styled with StyledDetail
:
<DetailsData>
<StyledDetail>{userData && userData.id}</StyledDetail>
<StyledDetail>{userData && userData.location}</StyledDetail>
<StyledDetail>{userData && userData.created_atd}</StyledDetail>
</DetailsData>
Upvotes: 2