Theo's Typesafe Cult•16mo ago

Noob question: How to pass a string to a child component?

I used prisma to get two strings from a database, now I want to give those two strings to a client component. This is because client components cant use prisma.
I'm new to react, how can I pass these strings to the client component? I'm thinking something like this:

"use client";

import { NextRequest, NextResponse } from "next/server";
import { redirect } from "next/navigation";
import { signIn } from "next-auth/react";

interface TwoStringsComponentProps {
    email: string;
    token: string;
}

export default function Activate({email, token}:{props: TwoStringsComponentProps}) {

  async function signInCall(){
    const signInResponse = await signIn("credentials", {
      email: {email},
      token: {token},
      callbackUrl: "/dashboard",
    });
  
  }

  signInCall()

    return <div>Hello world</div>;
    //now the cookie should be on the client machine
}

"use client";

import { NextRequest, NextResponse } from "next/server";
import { redirect } from "next/navigation";
import { signIn } from "next-auth/react";

interface TwoStringsComponentProps {
    email: string;
    token: string;
}

export default function Activate({email, token}:{props: TwoStringsComponentProps}) {

  async function signInCall(){
    const signInResponse = await signIn("credentials", {
      email: {email},
      token: {token},
      callbackUrl: "/dashboard",
    });
  
  }

  signInCall()

    return <div>Hello world</div>;
    //now the cookie should be on the client machine
}

and then the main page.tsx would have like:

<Activate email={email} token={token} />

<Activate email={email} token={token} />

How should I do this? This has been taking an embarrassing amount of time trying to figure out.

12 Replies

barry•16mo ago

A client component can't be async either.

RyanOP•16mo ago

Ok so if it isn’t async, how do I pass in those values to a client component within a server component

barry•16mo ago

did u try just passing first

RyanOP•16mo ago

I don't know how to do that. What did I do wrong in my example? i updated it

CuriouslyCory•16mo ago

Looks like you're using nextjs from your imports. If you're doing server side rendering you'll need to use "getServerSideProps" to run your prisma call on the server, which then gets passed to the component. https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering Alternatively (but doesn't look like your use case), if the inputs are known (think blog posts in a markdown directory, or database), you can use server side generation (SSG) in which case your HTML for each route would be built during the build process and served to the client when that route is requested. https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation

barry•16mo ago

He’s not using the pages router

CuriouslyCory•16mo ago

So it sounds like the react server component needs to run the query and pass the data as a prop to the client component.

// server component
import { db } from '@utils/database'
 
export async function DashboardPage() {
  const user = await db.query()
  // ...
  return (
    <Activate email={user.email} token={user.token} />
  )
}

// server component
import { db } from '@utils/database'
 
export async function DashboardPage() {
  const user = await db.query()
  // ...
  return (
    <Activate email={user.email} token={user.token} />
  )
}

RyanOP•16mo ago

"use client";

import { redirect } from "next/navigation";
import { signIn } from "next-auth/react";

interface TwoStringsComponentProps {
    email: string;
    token: string;
}

export default function Activate({
    email,
    token,
}: {
    props: TwoStringsComponentProps;
}) {
    async function signInCall() {
        const signInResponse = await signIn("credentials", {
            email: { email },
            token: { token },
            callbackUrl: "/dashboard",
        });
    }

    signInCall();

    return <div>Hello world</div>;
    //now the cookie should be on the client machine
}

"use client";

import { redirect } from "next/navigation";
import { signIn } from "next-auth/react";

interface TwoStringsComponentProps {
    email: string;
    token: string;
}

export default function Activate({
    email,
    token,
}: {
    props: TwoStringsComponentProps;
}) {
    async function signInCall() {
        const signInResponse = await signIn("credentials", {
            email: { email },
            token: { token },
            callbackUrl: "/dashboard",
        });
    }

    signInCall();

    return <div>Hello world</div>;
    //now the cookie should be on the client machine
}

and this error in the server component:

RyanOP•16mo ago

RyanOP•16mo ago

Prisma is doing the DB query on th server component, and the i want to give the output of that db query to the client component but i don't know the correct syntax for passing it in as props and using them this is the client component:

RyanOP•16mo ago

idk if thats how you pass in props to a client component from a server component

Gaming

Programming

Noob question: How to pass a string to a child component?