I’m absolutely new to JS and NextUI. I work with C# and DotNET normally.
I need to build a table with items that are selectable and at the click of a button, all the selected items should get passed to a ‘use server’ function that accepts a JSON-Array.
Now I’m stuck at getting the selected items from the table.
Here is what I tried, 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" })}>
Bitte die zu entfernenden Rezensionen auswählen:
</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.key is a number as in all the tutorials, even on the NextUI documentation.
In VS-Code it gives me this message on 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">'
If I run it, there is this message:
Error Message
It’s pretty frustrating…
Tim Oppitz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.