CODEWITHSUNDEEP
reactjsnext.jsgrommet
hammygoonan
hammygoonan

Reputation: 2225

Lists with Children in Grommet UI and TypeScript

I've got the following list in a Grommet UI component:

import { List } from "grommet";
import { ResourceLink, ResourceLinkProps } from "./ResourceLink";

type ResourceListProps = {
  resources: ResourceLinkProps[],
}

const ResourceList: React.FC<ResourceListProps> = ({resources}: ResourceListProps) => {
  return (
    <List data={resources} border={false} pad="none">
      {(resource: ResourceLinkProps) => <ResourceLink id={resource.id} name={ resource.name } urlPart={ resource.urlPart } />}
    </List>
  );
};

export default ResourceList;

I get an error saying: Type '(resource: ResourceLinkProps) => JSX.Element' is not assignable to type 'ReactNode'. Did you mean to call this expression?

If I wrap the children in a fragment I get an error saying TypeError: children is not a function.

Any ideas what I'm doing wrong?

Upvotes: 1

Views: 153

Answers (0)

Related Questions