Functions are not valid as a child of Client Components. This may happen if you return children instead of <children /> from render

[idilTugba]

Summary

Hi there, I understand that, I cant use children as a function in client component, and if I choose server componenet, I cant use states and I need opinion about that what is best way to build better stracture here

The whole error is that;

⨯ Error: Functions are not valid as a child of Client Components. This may happen if you return children instead of <children /> from render. Or maybe you meant to call this function rather than return it.

<... data={[...]} children={function children}> 

And the component;

'use client';
import React, { useCallback, useState, useEffect } from 'react';
import throttle from 'lodash.throttle';

const InfiniteScroll = ({
  data,
  children,
}: {
  data: any[];
  children: (latestData: any[]) => React.ReactNode;
}) => {
  const [itemsToShow, setItemsToShow] = useState<any[]>([]);
  const [lastIndex, setLastIndex] = useState(0);
  const [loading, setLoading] = useState(false);

  const loadItems = useCallback(
    throttle(
      () => {
        setLoading(true);
        const newIndex = lastIndex + 4;
        const newContent = data.slice(lastIndex, newIndex);
        setLastIndex(newIndex);
        setItemsToShow((prevItems) => [...prevItems, ...newContent]);
        setLoading(false);
      },
      2000,
      { trailing: false }
    ),
    [lastIndex, data]
  );

  useEffect(() => {
    loadItems();
  }, [loadItems]);

  return (
    <div>
      {children(itemsToShow)}{' '}
      {loading && <p>Loading...</p>}
    </div>
  );
};

And how I used the componenet;

<InifiniteScroll data={latestBlogData}>
        {(finalData: BlogDataType[]) => <CenterSide data={finalData} />}
      </InifiniteScroll>```


### Additional information

_No response_

### Example

_No response_

[nghuynh97]

same issue, any solution please ???

[icyJoseph]

Could you try something like, https://stackblitz.com/edit/nextjs-wskiwb4p?file=app%2FClient.tsx,app%2Fpage.tsx,app%2Fglobals.css,package.json

This should work because the props are a data type that's serializable, and a client reference that React can also handle across the boundary.

[nghuynh97]

Could you try something like, https://stackblitz.com/edit/nextjs-wskiwb4p?file=app%2FClient.tsx,app%2Fpage.tsx,app%2Fglobals.css,package.json

This should work because the props are a data type that's serializable, and a client reference that React can also handle across the boundary.

yes it worked

but how can i nested children inside Tag component ????

[icyJoseph]

could you show some pseudo-code so that we can speak over code?