# Section filtering,sorting and pagination

**URL:** <https://forum.codewithmosh.com/t/section-filtering-sorting-and-pagination/30382>\
**Category:** Next.js\
**Created:** [December 7, 2024, 1:09pm UTC](https://forum.codewithmosh.com/t/section-filtering-sorting-and-pagination/30382 "2024-12-07T13:09:49Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shahad](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@Shahad](https://forum.codewithmosh.com/u/Shahad)\
**Post date:** [December 7, 2024, 1:09pm UTC](https://forum.codewithmosh.com/t/section-filtering-sorting-and-pagination/30382/1 "2024-12-07T13:09:49Z")

</div>

In this section I have a couple of issues  
first on IssueStatusFilter.tsx

const IssueStatusFilter = () =\> {  
const router = useRouter();

```
return (
    <Select.Root
    onValueChange={(status) => {
        const query = status ? `?status=${status}` : '';
        router.push('/issues/list' + query);
    }}
    >
        <Select.Trigger placeholder="Filter by status..." />
        <Select.Content>
            {statuses.map((status) => (
                <Select.Item 
                    key={status.value} 
                    value={status.value}
                >
                    {status.label}
                </Select.Item>
            ))}
        </Select.Content>
    </Select.Root>
);

```

};  
\<Select.Item /\> must have a value prop that is not an empty string.

I fixed it by change onValueChange

onValueChange={(value) =\> {  
const statusToSend = value === ‘ALL’ ? ‘’ : value;  
const query = statusToSend ? `?status=${statusToSend}` : ‘’;  
router.push(‘/issues/list’ + query);  
}}  
\>  
its work fine but the IssuePage get the status as undefined

interface Props {  
searchParams: { status: Status };  
}

const IssuePage = async({ searchParams }: Props) =\> {  
console.log(“searchParams”, searchParams.status) // undefined  
----- rest of code  
}

next-app version 15.0.3 and raduix theme ^3.1.6  
anyone solve this problem?

---

<div class="post-metadata">

**Author:** ![andreirosu](https://avatars.discourse-cdn.com/v4/letter/a/58f4c7/32.png) [@andreirosu](https://forum.codewithmosh.com/u/andreirosu)\
**Post date:** [January 4, 2025, 6:51pm UTC](https://forum.codewithmosh.com/t/section-filtering-sorting-and-pagination/30382/2 "2025-01-04T18:51:52Z")

</div>

Hi,

I had the same issue (because I’m also using the latest nextjs and radix-ui version).

Anyway, I checked the Nextjs documentation and it seems like v15 is handling the props a bit different.  
It seems like now the props are a Promise.  
Check the documentation bellow.  
[Upgrading to NextJS 15](https://nextjs.org/docs/app/building-your-application/upgrading/version-15)

In IssueStatusFilter.tsx

```auto
        const query = status === "_all" ? "" : `?status=${status}`;
        router.push("/issues/list" + query);

```

…

```auto
      <Select.Content>
        {statuses.map((status) => (
          <Select.Item
            key={status.value || "_all"}
            value={status.value || "_all"}
          >
            {status.label}
          </Select.Item>
        ))}
      </Select.Content>

```

In page.tsx

```auto
type SearchParams = Promise<{ status: Status }>;

interface Props {
  searchParams: SearchParams;
}

export default async function IssuesPage(props: Props) {
  const searchParams = await props.searchParams;
  const statuses = Object.values(Status);

  const status = statuses.includes(searchParams.status)
    ? searchParams.status
    : undefined;

  const issues = await prisma.issue.findMany({
    where: {
      status,
    },
  });

```

…  
remove the

```auto
export default IssuePage

```