How to pass props to components

[LushawnDev]

Hey, thanks so much for your library @theisel.

I'm passing my own custom ListItem component to the PortableText component, shown below.

---
import { PortableText as PortableTextInternal } from "astro-portabletext";
import ListItem from "./ListItem.astro";

export interface Props {
  portableText: any;
}

const { portableText } = Astro.props as Props;

const components: any = {
  listItem: {
    bullet: ListItem,
  },
};
---

<PortableTextInternal value={portableText} components={components} />

Is there a way to pass props to the component you match up to the listItem? I've tried doing it like this bullet: ListItem({ isPortableText: true }), but then I get the following error:
"Invalid arguments passed to component.
Astro components cannot be rendered directly via function call, such as Component() or {items.map(Component)}."

Is there a way to pass props to components with this library?

Thank you for your time!

[theisel]

Hi @LushawnDev, I suggest making a PortableTextListItem and a generic ListItem component.

Refer also to extending ListItem.

/* PortableTextListItem */
---
import type { Props as $, ListItem } from "astro-portabletext/types";
import Li from "path/to/ListItem.astro";

export type Props = $<ListItem>;

const { node } = Astro.props;

const liProps = {
  listItem: node.listItem,
};
---

<Li {...liProps}>
  <slot />
</Li>

/* ListItem */
---
export type Props = {
  listItem: string;
};

// Do something with listItem prop
---

<li><slot /></li>

[theisel]

Hi @LushawnDev have you managed to resolve your issue?

[LushawnDev]

Hey @theisel, sorry I didn't see your reply!

Yeah okay I think that makes sense, I'll try it out.

So if I already have my custom <ListItem /> component, I'm essentially just importing that into a new, separate <PortableListItem /> component where I can specify any probs I need for the <ListItem />? Then I just import it as before like this in my PortableText component:

---
import { PortableText as PortableTextInternal } from "astro-portabletext";
import PortableListItem from "./PortableListItem.astro";

export interface Props {
  portableText: any;
}

const { portableText } = Astro.props as Props;

const components: any = {
  listItem: {
    bullet: PortableListItem,  // This PortableListItem item is a component that contains my custom ListItem component with necessary props
  },
};
---

<PortableTextInternal value={portableText} components={components} />

Have I got that right?

Thanks so much for your time and help! Do you have a buymeacoffee link or anything?

[theisel]

It would be better to do the following:

---
import { PortableText as PortableTextInternal } from "astro-portabletext";
import PortableListItem from "./PortableListItem.astro";

export interface Props {
  portableText: any;
}

const { portableText } = Astro.props as Props;

const components: any = {
- listItem: {
-   bullet: PortableListItem,  // This PortableListItem item is a component that contains my custom ListItem component with necessary -props
- },
+ listItem: PortableListItem 
};
---

<PortableTextInternal value={portableText} components={components} />