React component props not getting rendered inside Next.js Page

Question

I'm trying to render data from props in React functional component that look like this:

interface TagsComponentProps {
    tags: Tag[];
}

const TagsComponent: FC<TagsComponentProps> = (props: TagsComponentProps) => (
    <>
        {props.tags.length === 0 &&
            <LoadingStateComponent />
        }
        {props.tags.map(tag => {
                { tag.tagId }
                { tag.tagName }
            })
        }
    </>
)

export default TagsComponent;

Within Next.js page that receiving data inside the getStaticProps method. It looks like that:

const IndexPage = ({ tags }: InferGetStaticPropsType<typeof getStaticProps>) => (
    <>
        <LayoutComponent>
            <TagsComponent tags={tags} />
        </LayoutComponent>
    </>
)

export default IndexPage;

export const getStaticProps = async () => {
    const res = await fetch(`${process.env.HOST}/api/tags/read`)
    const data = await res.json()
    // if (error) {
    //     return <ErrorComponent errorMessage={'Ошибка загрузки тегов'} />
    // }
    return {
        props: {
            tags: data.Items as Tag[]
        }
    }
}

But nothing is getting rendered at all although I'm receiving data. Probably I'm missing some concept of data fetching for SSR in Next.js .

Answer 1

I guess the issue is .map() is not returning anything in your code here:

{props.tags.map(tag => {
      { tag.tagId }
      { tag.tagName }
   })
}

Instead you should try as the following:

{
   props.tags.map(tag => (
     <>
        { tag.tagId }
        { tag.tagName }
      </>
   ))
}

Also you can do a null check before as props.tags && props.tags.map() .