I wanna pass the values from the component to the page.tsx so I can use them dynamically. I know I could do this with an useState in page.tsx but I don't wanna transform it in a client component.const TopTracksTable: React.FC = ({ tracks, title }) => { return ( Time Range Short Term Medium Term Long Term page.tsx:export default async function Page() { const session = await auth(); if (!session?.user) return null; const accessToken = session.access_token ?? ""; const [radarChartData, topGenres, topTracks] = await Promise.all([ getRadarChartData(accessToken), fetchTopGenres(accessToken), fetchTopTracks(accessToken, "medium_term", 5), ]);

How can I pass the select values from a component to a page.tsx file?

Answered

Ocicat posted this in #help-forum

OcicatOP

2024-05-13T13:16:10.181Z

I wanna pass the values from the component to the page.tsx so I can use them dynamically. I know I could do this with an useState in page.tsx but I don't wanna transform it in a client component.

const TopTracksTable: React.FC<TopTracksTableProps> = ({ tracks, title }) => {
  return (
    <div className="rounded-lg bg-secondary border border-border">
      <SectionTitle title={title} />
      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Select a time range" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Time Range</SelectLabel>
            <SelectItem value="short_term">Short Term</SelectItem>
            <SelectItem value="medium_term">Medium Term</SelectItem>
            <SelectItem value="long_term">Long Term</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>

page.tsx:

export default async function Page() {
  const session = await auth();

  if (!session?.user) return null;

  const accessToken = session.access_token ?? "";

  const [radarChartData, topGenres, topTracks] = await Promise.all([
    getRadarChartData(accessToken),
    fetchTopGenres(accessToken),
    fetchTopTracks(accessToken, "medium_term", 5),
  ]);

Answered by Arinji

nope, https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api

View full answer

14 Replies

Arinji

2024-05-13T13:22:55.637Z

so you want to pass data from a client component to a its page? @Ocicat

@Arinji so you want to pass data from a client component to a its page? <@327741242505166848>

OcicatOP

2024-05-13T13:24:01.488Z

hmm in this case yes. I'm just trying to find a way to keep the page as a server component. I wanna let the user to select a value, then use that value in the fetch function that I'm callin inside the page.tsx

@Ocicat hmm in this case yes. I'm just trying to find a way to keep the page as a server component. I wanna let the user to select a value, then use that value in the fetch function that I'm callin inside the page.tsx

Arinji

2024-05-13T13:24:24.163Z

put it in the search params

like dump it in the url

and have your page listen to the url

@Arinji put it in the search params

OcicatOP

2024-05-13T13:25:49.997Z

will this cause a page refresh?

@Ocicat will this cause a page refresh?

Arinji