Noob help with Keys/useListData in a Select Component

[NickWoodward]

Hi there,

Sorry if this isn't the place for this sort of beginner question, but I'm really struggling to make a reusable Select Component with Keys and/or useListData.

So far I can make it sort of work with strings and useState, but it means I've only got access to the selected index:

Live Demo here

Code Snippets:

export default function App() {
  const [tags, setTags] = useState<string[]>([]);
    const items = [
      { id: 1, name: "Permanent" },
      { id: 2, name: "Temporary" },
      { id: 3, name: "Contract" },
    ];
    const addTag = (item: string) => {
      if (tags.includes(item.toString())) return;
      setTags([...tags, item]);
    };
    const removeTag = (item: string) => {
      setTags((tags) => tags.filter((tag) => tag !== item));
    };
    
    return(
      //...
      <JobTypeSelect items={items} setJobType={addTag} className="" />
        {tags.map((tag) => (
          <Button onPressStart={() => removeTag(tag)}>
            <span>{tag}</span>
            <CloseIcon  />
          </Button>
        ))}
    )

// JobTypeSelect.tsx

interface Props {
  className: string;
  setJobType: (item: string) => void;
  items: { id: number; name: string }[];
}
export const JobTypeSelect = ({ className, items, setJobType }: Props) => {
  return (
    <ItemSelect
      label="Job Type"
      items={items}
      onSelectionChange={(item) => {
        return setJobType(item.toString());
      }}
    >
      {(item) => <ListBoxItem key={item.id}>{item.name}</ListBoxItem>}
    </ItemSelect>
  );
};

Obviously this isn't the right way to do it, but every time I try and replace my state with useListData I struggle typing the onSelectionChange and other properties I try and pass, even with the api here

Really would appreciate any guidance, or even links to example Components that are both typed and more reusable (most examples I've found tend to use hooks)

Thanks a lot!

Nick

[snowystinger]

Your codesandbox is private, you'll need to mark it as public.
We have some examples here using useListData in RAC https://react-spectrum.adobe.com/react-aria/ListBox.html#reorderable

I think you're getting mixed up between item vs the selection key "id". It may help to log out item.toString in your onSelectionChange.

[NickWoodward]

*edit: I think I fixed it 😊

Hi @snowystinger, thanks for the reply,

So I decided to ditch using my own state and try to implement useListData

Have spent a long time on this so I think I'm close, and I hope it's made for a better question. I'm just struggling to type the list as I pass it to my ItemSelect component. I get the following error:

Type 'ListData' is not assignable to type 'ListData<{ id: number; name: string; }>'.
Type 'T' is not assignable to type '{ id: number; name: string; }'.typescript(2322)

My app structure is like this:
Codepen Demo here

App.tsx

export default function App() {
  const list = useListData({
    initialItems: [
      {id:1, name: 'Permanent'},
      {id:2, name: 'Temporary'},
    ],
    initialSelectedKeys: ['Permanent'],
    getKey: item => item.name
  });

  return (
    <div className="App">
      <div>
          <JobTypeSelect items={list.items} list={list} className="" />
      </div>
    </div>
  );
}

JobTypeSelect.tsx

interface Props<T> {
  className: string;
  list: ListData<T>;
  items: { id: number; name: string }[];
}

export const JobTypeSelect = <T,>({ className, list, items }: Props<T>) => {
  return (
    <ItemSelect label="Job Type" items={items} list={list}>  // <------------------------this is where I get the error
      {(item) => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>}
    </ItemSelect>
  );
};

ItemSelect.tsx

interface Props<T extends object> extends Omit<SelectProps<T>, "children"> {
  label?: string;
  description?: string;
  errorMessage?: string | ((validation: ValidationResult) => string);
  items?: Iterable<T>;
  list: ListData<T>;
  children: React.ReactNode | ((item: T) => React.ReactNode);
}

export function ItemSelect<T extends object>({
  label,
  description,
  errorMessage,
  children,
  items,
  list,
  ...props
}: Props<T>) {
  return (
    <Select {...props}>
      <Label>
        {label}
      </Label>
      <Button>
        <SelectValue />
        <span aria-hidden="true">▼</span>
      </Button>
      {description && <Text slot="description">{description}</Text>}
      <FieldError>{errorMessage}</FieldError>
      <Popover>
        <ListBox
          items={list.items}
          selectedKeys={list.selectedKeys}
          onSelectionChange={list.setSelectedKeys}
        >
          {children}
        </ListBox>
      </Popover>
    </Select>
  );
}

[NickWoodward]

saw you in codesandbox, thanks for checking :)

[NickWoodward]

Sorry for bumping again!

Have just noticed that the Select was working in-spite of passing the selectedKeys and onSelectionChange properties to the ListBox component

Just not sure why neither seem to be working? Demo link

<ListBox
  items={list.items}
  selectedKeys={list.selectedKeys}
  onSelectionChange={(key) => {
    console.log("not called");
    list.setSelectedKeys(key);
  }}
>

[yihuiliao]

Because the <ListBox /> is within a <Select /> component, you'll want to set onSelectionChange on <Select /> instead of on <ListBox>. I can look into it more but that should at least help you get started

[NickWoodward]

Because the <ListBox /> is within a <Select /> component, you'll want to set onSelectionChange on <Select /> instead of on <ListBox>. I can look into it more but that should at least help you get started

Thanks a lot, appreciate it! :)