Theo's Typesafe Cult•2y 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•2y ago

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

Paulius | 24500 MentorOP•2y 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•2y ago

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

Paulius | 24500 MentorOP•2y ago

Yeah, sorry, you will have to elaborate more thinkies

could i fix it? 😄

barry•2y ago

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

Paulius | 24500 MentorOP•2y ago

Could I convert it to client component?

barry•2y ago

It’s your component

Paulius | 24500 MentorOP•2y ago

so what? can I convert it to client side?

barry•2y ago

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

Paulius | 24500 MentorOP•2y ago

how could I do that?

barry•2y ago

Google how Docs

chip•2y ago

Just set the parent component to "use client"

Silver-Spy•2y ago

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

juvies•2y 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•2y ago

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

Coded_58•17mo ago

the uncle no one ever wants around

Gaming

Programming

How to convert shadcn/ui components to Client component?