Pass props to slicezone using "@prismicio/react"

Developing with Prismic
,
1

Hi,
I'm attempting to create a Slice that takes props coming from a page. I read that in the past using primicio/react that wasn't possible, only using next-slicezone, however, I'm seeing that it will be deprecated soon.

Here's the page code:

const Productos = ({ page, navigation, settings, tags }) => {
  console.log("tags: ", tags)
  return (
    <Layout navigation={navigation} settings={settings}>
      <Head>
        <title>
          {prismic.asText(page.data.title)} |{" "}
          {prismic.asText(settings.data.siteTitle)}
        </title>
      </Head>
      <SliceZone slices={page.data.slices} components={components} tags={tags}/>
    </Layout>
  )
}

export default Productos

export async function getStaticProps({ params, locale, previewData }) {
  const client = createClient({ previewData })

  const tags = await client.getTags("producto", params.uid, { lang: locale })
  const page = await client.getByUID("producto", params.uid, { lang: locale })
  const navigation = await client.getSingle("navigation", { lang: locale })
  const settings = await client.getSingle("settings", { lang: locale })

  return {
    props: {
      page,
      navigation,
      settings,
      tags,
    },
  }
}

Here's the slice code:

const Tags = ({ slice }) => {
  return (
    <section
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      <Stack>
        {slice.tags.map((tag) => {
          return <Chip key={tag} label={tag} onClick="" />
        })}
      </Stack>
    </section>
  )
}

export default Tags

As you can see it's pretty simple, I just want to give my slice the tags coming from the document and render them inside the slice.
I'm not entirely sure if I'm doing the implementation correctly inside the slice code, but I'd like to see if the problem comes from passing the props

Any help is appreciated

2

Sorry, I just read the whole documentation and the props need to be passed as context.
Here's how I did it:
page code:

<SliceZone slices={page.data.slices} components={components} context={tags}/>

slice code:

const Tags = ({ slice, context }) => {
  console.log("slice context: ", context)
  return (
    <section
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      <Stack>
        {context.map((tag) => {
          return <Chip key={tag} label={tag} onClick={handleClick()} />
        })}
      </Stack>
    </section>
  )
}

export default Tags
1 Like