I'm new to Motion and I'm running into trouble with Reorder.
From what I've read in other discussions and the lack of specificity in the documentation, it seems like the items prop of <Reorder.Group> should accept any array. However, framer-motion 12.0.0-alpha.1 (as prescribed for Next.js 15 / React 19), is giving a TypeScript error requiring the only one possible array time, so it won't accept my array that could be all strings or all numbers.
I'm not mixing types within my array. My array type is number[] | string[], but that won't be accepted by the values prop.
Demo
// imports
function List() {
const [items, setItems] = useState<number[] | string[]>(['a','b',''c']);
return (
<Reorder.Group values={items} onReorder={setItems}>
// Other code
</Reorder.Group>
)
This gives me the following error in VS Code:
Type 'number[] | string[]' is not assignable to type 'number[]'.
Type 'string[]' is not assignable to type 'number[]'.
Type 'string' is not assignable to type 'number'.ts(2322)
index.d.ts(3836, 5): The expected type comes from property 'values' which is declared here on type 'IntrinsicAttributes & Props$1<number> & Omit<HTMLMotionProps<any>, "values"> & { children?: ReactNode; } & { ...; }'
I'm new to Motion and I'm running into trouble with Reorder.
From what I've read in other discussions and the lack of specificity in the documentation, it seems like the
itemsprop of<Reorder.Group>should accept any array. However,framer-motion12.0.0-alpha.1 (as prescribed for Next.js 15 / React 19), is giving a TypeScript error requiring the only one possible array time, so it won't accept my array that could be all strings or all numbers.I'm not mixing types within my array. My array type is
number[] | string[], but that won't be accepted by thevaluesprop.Demo
This gives me the following error in VS Code: