Theo's Typesafe Cult•11mo 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•11mo ago

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

pauliusss•11mo 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•11mo ago

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

pauliusss•11mo ago

Yeah, sorry, you will have to elaborate more thinkies

could i fix it? 😄

barry•11mo ago

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

pauliusss•11mo ago

Could I convert it to client component?

barry•11mo ago

It’s your component

pauliusss•11mo ago

so what? can I convert it to client side?

barry•11mo ago

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

pauliusss•11mo ago

how could I do that?

barry•11mo ago

Google how Docs

chip•11mo ago

Just set the parent component to "use client"

silverspy.•11mo ago

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

juvies•11mo 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•11mo ago

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

Coded_58•11mo ago

the uncle no one ever wants around

Gaming

Programming

How to convert shadcn/ui components to Client component?