Since repeatable link field response with an array of LinkField, how should I use it in Typescript JSX with prismic/next.
{isFilled.group(slice.primary.hero_button) ? (
slice.primary.hero_button.map((button, idx) => (
<PrismicNextLink key={idx} field={button} /> // Type Error
))
) : (
<PrismicNextLink field={slice.primary.hero_button} />
)}
hey Cody, the prismic-ts-codegen tool generates your types. It integrates with @prismicio/client and can help make fields including group fields and links. Here’s the doc in case you wanna take a look:
Okay, but there should be a better way.
Hi @codyslexia,
Looks like your is using isFilled.group, but you should be using isFilled.repeatable since it is a repeatable link field, not a group field. Their code should look like this:
<ul>
{isFilled.repeatable(page.data.links) &&
page.data.links.map((link) => (
<li key={link.text}>
<PrismicNextLink field={link} />
</li>
))}
</ul>
By using isFilled.repeatable, you won't get a type error. You’re using a ternary to fall back to a non-repeated Prismic link. That will probably result in type errors. We recommend writing code to support exactly what the field is: either a repeatable field (use .map) or a non-repeatable field: (don't use .map)
prismic-ts-codegen is still up to date and relevant for anyone who wants to use it.
You can pass any feedback directly to the team working on this tool in the Github repo for this package:
Thanks.
