I am using grommet component library for my react app and I tried using List component for one of my requirement. I referred grommet documentation :
Example
and accordingly tried using the List component with children using typescript. Below is my code:
import React from 'react';
import { Box, List, Tip, Text } from 'grommet';
import { Gremlin } from 'grommet-icons';
const dataList: { city: string; state: string }[] = [
{ city: 'Boise', state: 'Idaho' },
{ city: 'Fort Collins', state: 'Colorado' },
{ city: 'Bay Area', state: 'California' },
{ city: 'San Diego', state: 'California' },
];
const renderListItem = (datum: { city: string; state: string }) => (
<Tip content={datum.state} dropProps={{ align: { left: 'right' } }}>
<Box direction="row-responsive" gap="medium" align="center">
<Gremlin size="large" />
<Text weight="bold">{datum.city}</Text>
</Box>
</Tip>
);
const Children: React.FC = () => (
<Box pad="large" height="100%" align="center">
<List data={dataList} pad="medium" border={false}>
{renderListItem}
</List>
</Box>
);
export default Children;
But this gives me following error:
Type ‘(datum: { city: string; state: string;}) =>
React.JSX.Element’ is not assignable to type ‘(((…args: any[]) =>
any) & (string | number | boolean | ReactElement<any, string |
JSXElementConstructor> | Iterable | ReactPortal |
null)) | undefined’. Type ‘(datum: { city: string; state:
string;}) => React.JSX.Element’ is not assignable to type ‘((…args:
any[]) => any) & string’.
Type ‘(datum: { city: string; state: string;}) => React.JSX.Element’ is not assignable to type ‘string’.ts(2322)
index.d.ts(46, 3): The expected type comes from property ‘children’
which is declared here on type ‘IntrinsicAttributes &
ListExtendedProps<{ city: string; state: string; }> & { children?:
ReactNode; }’const renderListItem: (datum: { city: string; state: string; }) => React.JSX.Element
I see similar question on SO : Lists with Children in Grommet UI and TypeScript. But I dont see any answers there too. I tried by passing various types but all in vain.
Could any one please throw some light on this ?
Thanks