I am completely new to JavaScript and NextUI. My usual work involves C# and DotNET. I have a requirement to create a table with selectable items, and when a button is clicked, all the selected items should be passed to a function on the server that accepts a JSON Array.
However, I am facing issues in retrieving the selected items from the table. Here is my attempt after following some tutorials:
// ...
const [selectedKeys, setSelectedKeys] = React.useState(new Set([]));
return (
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
<div className="inline-block max-w-lg text-center justify-center">
<h2 className={subtitle({ class: "mt-4" })}>
Please select the reviews to be removed:
</h2>
</div>
<div className="flex flex-col gap-3">
<Table
color="primary"
selectionMode="multiple"
aria-label="Example static collection table"
isStriped
selectedKeys={selectedKeys}
onSelectionChange={setSelectedKeys}
>
<TableHeader columns={columns}>
{(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
</TableHeader>
<TableBody items={reviews}>
{(item) => (
<TableRow key={item.key}>
{(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
</TableRow>
)}
</TableBody>
</Table>
);
// ...
The item keys are numbers as per all tutorials, including those in the NextUI documentation.
In VS Code, I see this message regarding the onSelectionChange method:
Type 'Dispatch<SetStateAction<Set<never>>>' is not assignable to type '(keys: Selection) => void'.
Types of parameters 'value' and 'keys' are incompatible.
Type 'Selection' is not assignable to type 'SetStateAction<Set<never>>'.
Type 'string' is not assignable to type 'SetStateAction<Set<never>>'.ts(2322)
selection.d.ts(39, 3): The expected type comes from property 'onSelectionChange' which is declared here on type 'IntrinsicAttributes & MergeWithAs<Omit<DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, Omit<...>, TableProps, "table">'
When I try to run it, I encounter this message:
This situation is quite frustrating for me.