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!

1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.