Theo's Typesafe Cult•16mo ago

How to convert shadcn/ui components to Client component?

I'm using shadcn/ui components, and I can't make them interactive. E.g. <Button onClick={() => console.log("hi")}></Button> gives error

16 Replies

barry•16mo ago

It already is a client component It’s talking about your component

Paulius | 24500 MentorOP•16mo ago

import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
  } from "@/components/ui/table"
import { Button } from "@/components/ui/button";
  
export default function MainTable() {
    const checkmark = "\u2705";
    const xmark = "\u274C";

    const success = "text-green-500";


    return (
      <div className="min-w-[350px] mt-4 px-2">
        <Table className="">
            <TableHeader>
                <TableRow>
                    <TableHead className="w-[150px]">Name</TableHead>
                    <TableHead className="text-right">Availability</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody >
                <TableRow className="hover:bg-white">
                    <TableCell className={`font-medium ${success}`}>name.io</TableCell>
                    <TableCell className="text-right text-green-500">
                        <Button className="w-[75px] bg-green-500 hover:bg-white hover:text-green-500 border">Click</Button>
                    </TableCell>
                </TableRow>
                <TableRow>
                    <TableCell className={`font-medium ${success}`}>name 1</TableCell>
                    <TableCell className="text-right text-green-500">{checkmark}</TableCell>
                </TableRow>
                <TableRow>
                    <TableCell className={`font-medium ${success}`}>name 2</TableCell>
                    <TableCell className="text-right text-green-500">{checkmark}</TableCell>
                </TableRow>
            </TableBody>
        </Table>
      </div>
    )
  }

import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
  } from "@/components/ui/table"
import { Button } from "@/components/ui/button";
  
export default function MainTable() {
    const checkmark = "\u2705";
    const xmark = "\u274C";

    const success = "text-green-500";


    return (
      <div className="min-w-[350px] mt-4 px-2">
        <Table className="">
            <TableHeader>
                <TableRow>
                    <TableHead className="w-[150px]">Name</TableHead>
                    <TableHead className="text-right">Availability</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody >
                <TableRow className="hover:bg-white">
                    <TableCell className={`font-medium ${success}`}>name.io</TableCell>
                    <TableCell className="text-right text-green-500">
                        <Button className="w-[75px] bg-green-500 hover:bg-white hover:text-green-500 border">Click</Button>
                    </TableCell>
                </TableRow>
                <TableRow>
                    <TableCell className={`font-medium ${success}`}>name 1</TableCell>
                    <TableCell className="text-right text-green-500">{checkmark}</TableCell>
                </TableRow>
                <TableRow>
                    <TableCell className={`font-medium ${success}`}>name 2</TableCell>
                    <TableCell className="text-right text-green-500">{checkmark}</TableCell>
                </TableRow>
            </TableBody>
        </Table>
      </div>
    )
  }

barry•16mo ago

Don’t tell me I have to repeat what I said 😂

Paulius | 24500 MentorOP•16mo ago

Yeah, sorry, you will have to elaborate more thinkies

could i fix it? 😄

barry•16mo ago

Your. Component. Is. Server. Component. Server component cannot pass event handlers to client components

Paulius | 24500 MentorOP•16mo ago

Could I convert it to client component?

barry•16mo ago

It’s your component

Paulius | 24500 MentorOP•16mo ago

so what? can I convert it to client side?

barry•16mo ago

Why don’t you try making it into a client component

Paulius | 24500 MentorOP•16mo ago

how could I do that?

barry•16mo ago

Google how Docs

chip•16mo ago

Just set the parent component to "use client"

silverspy.•16mo ago

in the start of file add a line 'use client'

juvies•16mo ago

Apologies if my advice seems unsolicited, but saying directly how to do it, @thatbarryguy , could have possibly avoided repeated questions from that guy. It's clear the person is an absolute beginner. Thanks for understanding.

barry•16mo ago

I’m not gonna spoon feed He should be able to Google simple things

Coded_58•16mo ago

the uncle no one ever wants around

Gaming

Programming

How to convert shadcn/ui components to Client component?