Route, passing data to a non-route, data is loading then undefined

[gritty pendant]

Top level route:

export const loader = async ({ request }: LoaderArgs) => {
  const endpoint: string = '/api/blogs';
  const params: string = 'someparams';
  const blogData: Array<Blog> = await fetchData(endpoint, params);

  const data = blogData.slice(0, 5);

  return json({
    data,
  });
};

const Blog = (): JSX.Element => {
  const data = useLoaderData<typeof loader>();
  const arrayOfBlogs = data.data as Array<Blog>;
  return (
    <div className="Blog">
      <RecyclingBlogs recyclingBlogs={arrayOfBlogs} />
    </div>
  );
};

const BlogPosts = (props: Props): JSX.Element => {
  console.log(
    'In Blog Posts, arrayOfBlogs is available on first load and then reloads and is unavailable',
    recyclingBlogs === undefined
  );

  return <Section></Section>;
};

This is a miniature, simplified version of the code. Anyone got any ideas?

Basically it is coming through with all the data in the route perfectly, then in Blog it is perfect, and then in BlogPosts it is there and then it disappears.

[timber pond]

Youre doing recyclingBlogs === undefined but recyclingBlogs is not defined

Should be props.recyclingBlogs

Still seems weird tho, shouldnt change if youre using a loader like this

[gritty pendant]

sorry this is a minified version of the app

const { title, viewAllLink, recyclingBlogs } = props;

is in the actual BlogPosts component

Here is is in full:

  const { title, viewAllLink, recyclingBlogs } = props;

  console.log('In Blog Posts, recyclingPosts is undefined', recyclingBlogs === undefined);

  return (
    <SectionWrapper isFadeIn={false}>
      <section className="BlogPosts posts-body">
        <div className="titleWrapper">
          <h3 className="title">{title}</h3>
          <Button className="viewAllButton" isLink={true} link={`/blog-category/${viewAllLink}`}>
            View all
          </Button>
        </div>
      </section>
    </SectionWrapper>
  );
};

export default BlogPosts;

And it isn't ONLY undefined, it is there (the data) and then it goes undefined, like in the image.

[timber pond]

Is this happening on your server only or also on the client

[gritty pendant]

Currently it is going:

Parent route gets data via loader --> Passes to child component --> Passes to child component
Data is available Data is available Data is available and then undefined

[timber pond]

Idk how exactly remix does stuff but perhaps its rendering the page on the server, then gets the loader data, then rerenders it on the server, and then sends it to the client

[gritty pendant]

Yeah I suppose I could debug it. Just seems stupid. The data isn't changing, I'm still on the parent route where data is loaded in. Should be the same as passing a string.