I have a client-side component that fetches data, but I want the data to be visible to the browser, I know it’s possible.

I can get it done when using simple strings and passing that string as a child to the server side component

When I view source and the string is visible, but as soon as I add an array…nothing is visible

At the moment I’m loading a server component as a prop and a children ReactNode:

"use client";
import React from "react";
import { StateLoading } from "@/shared/enums/loading";
import { useSelectorEffect } from "@/hooks/useSelector";
import { useAppSelector } from "@/hooks/store.hooks";

import styles from "@/styles/core/_category.module.scss";

import CategoryItem from "./CategoryItem";
import { Preview } from "../interfaces/preview";

interface DisplayProps<T> {
  statusSelector: (state: any) => string;
  fetchAction: any;
  slot: any;
  title: string;
  children: React.ReactNode;
}

const Category = <T extends Preview>({
  statusSelector,
  fetchAction,
  slot,
  children,
}: DisplayProps<T>) => {
  const isClientLoaded = true;
  const isLoading = useAppSelector(statusSelector) === StateLoading.LOADING;
  return (
    <>
      {slot}
      {children}
    </>
  );
};

export default Category;

And where I’m using the above in here:

"use client";

import { useAppSelector } from "@/hooks/store.hooks";
import Category from "@/shared/components/Category";
import CategoryItem from "@/shared/components/CategoryItem";
import { Preview } from "@/shared/interfaces/preview";
import {
  selectStatus,
  getComics,
  selectComicsPreview,
} from "@/store/comics/comicsSlice";
import Link from "next/link";

const ComicsDisplay = () => {
  const items = useAppSelector(selectComicsPreview);
  return (
    <>
      <div>
        <Link href={"/"}>Back to main Page</Link>
      </div>
      <Category<any>
        slot={<CategoryItem>what</CategoryItem>} // This I can see on the page and when I view source
        statusSelector={selectStatus}
        fetchAction={getComics}
        title="Comics Category"
      >
        <CategoryItem>
          {items?.map((item: any) => `${item.title}`)} //This I can only see on the page
        </CategoryItem>
        {/* */}
      </Category>
    </>
  );
};

export default ComicsDisplay;

And the server component is quite simple:

import React from "react";

const CategoryItem = ({
  children,
}: {

  children: React.ReactNode;
}) => {
  return (
    <>

      {children}
    </>
  );
};

export default CategoryItem;