hook in function "cell"

[mawnir]

i have a column like this : export const columns: ColumnDef<Post>[] = [{

{
     id: 'actions',
    cell: ({ row }) => {
         const { push } = useRouter();   <=======
         const editPost = (id: string) => {
             push(`/dashboard/posts/edit/${id}`);
         };
         return (....

i get this error : React Hook "useRouter" is called in function "cell" that is neither a React function component nor a custom React Hook function.
how can i pass the id value to the main component? is there any better way to do this?

[mawnir]

i fix it with new component in cell

const CellComponent = ({ row }: { row: any }) => {
        const { push } = useRouter();   <=======
         const editPost = (id: string) => {
             push(`/dashboard/posts/edit/${id}`);
         };
....
}

{
 cell: CellComponent,
}

[donis3]

Hi, If anyone is still having this issue, I fixed it by converting the arrow function to a normal one with a Name()

const columns = [
  {
    cell: function CellComponent({ row }) {
      const value = useHook(); //Now working
    },
  },
];
	

Hope this helps

[liel-almog]

I like it more inline.
If I don't need it inline I would probably move it to a different file.