JSS Placeholder Children

Question

I'm developing a carousel using JSS. The items that would go into the carousel are well known (through the Placeholder Settings), but I am using a Placeholder to hold those items.

I need to get the children of the Placeholder, so that I can show each item individually. I am using NextJS for the framework. The idea is using the React useState and useEffect to show or hide each slide.

The issue is that once the slides are rendered in the Placeholder, I need to access each individual element to show or hide the active one. Using the old document.querySelectorAll is failing because for whatever reason document is null, which is the usual JavaScript environment, returns the current document.

I tried assigning a variable to the result of the Placeholder like this:

{(content = <Placeholder name="carouselItems" rendering={props.rendering} />)}

but then if seems like it is just returning an object, not the underlying elements that were rendered.

Please correct me if my approach is wrong. If it makes sense, how do I get to the underlying document in the underlying browser? I feel like I am missing something!

Answer 1

The answer is to use the renderEach property of the Placeholder. This is a callback that takes the component to render and the index of the item being rendered. There is also a render property of the Placeholder that lets you have control and it takes the components, the placeholder data, and properties of the Placeholder.