How to display one slice using `<Slicezone />`

[gabriel-cyberfuze]

Hi, there. Hope you're doing well.

I'm trying to display slices using <Slicezone /> tag. But in <Slicezone />, they show all slices by looping.

I want to display one slice using <Slicezone />.

Is it possible?

[lihbr]

Hey @gabriel-cyberfuze, thank you so much for contributing. I'm sorry we failed to get back to you in a timely manner.

Yes, this should be possible! Slices you provide to the <SliceZone /> component are just an array of object. In that regard you can filter it, pick one, or do whatever you want with it really as long as it stays an array. Here are some examples:

Rendering slice N

import { SliceZone } from "@prismicio/react";
import { components } from "@/slices/";

export default function MyComponent({ slices }) {
    const n = 1;

    return <SliceZone slices={slices[n] ? [ slices[n] ] : []} components={components} />;
}

Rendering slices of type T

import { SliceZone } from "@prismicio/react";
import { components } from "@/slices/";

export default function MyComponent({ slices }) {
    const t = "marketing_hero";

    return <SliceZone slices={slices.filter((slice) => slice.slice_type === t)} components={components} />;
}

---

I'm curious what's your use case for rendering only one slice? Feel free to elaborate, maybe we can make this experience simpler for you.

In the meantime, I hope this answered your question, but feel free to reopen if it didn't~!