marcinb1986
marcinb1986

Reputation: 892

Children as text don't display in Text component in React Native

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

Answers (1)

Andru
Andru

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

Related Questions