Having Trouble Abstract Components

Unanswered

Transvaal lion posted this in #help-forum

Transvaal lionOP

2023-10-09T00:43:07.000Z

Hi, Thanks for reading, I'm having issues understanding how to make this component dymanic after abstracting it, trying to allow for action buttons to be dynamic, the component is being rendered from the page file which i ratther keep as a server component here is the component in question:

const DepartmentsPage = () => {

    const statistics: StatisticItem[] = [
        {
            name: 'Total Departments',
            value: 10,
        },
        {
            name: 'Total Employees',
            value: 100,
        },
        {
            name: 'Total Positions',
            value: 100,
        },
    ]

    const actions = [
        <CogIcon onClick={() => alert('this')} key="settings-action" className="h-7 w-7 text-gray-500 hover:text-gray-200 duration-300 cursor-pointer hover:animate-[spin_5s_ease-in-out_infinite]" />,
    ]

    return (
        <main className="min-h-screen">
            <HeaderNavigationBar />
            <SecondaryNav title="Department" breadcrumbs={departmentConfig.admin.breadcrumbs} statistics={statistics} actions={actions} />
        </main>
    )
}

export default DepartmentsPage

15 Replies

DirtyCajunRice | AppDir

2023-10-09T01:56:01.000Z

im super confused at what you are trying to achieve with this code

also you need to put your code in codeblocks

Transvaal lionOP

2023-10-09T02:25:34.000Z

apologies for the confusion i have issues explaining issues.

However it turns out i just needed to put the actions in a client component,

const actions = [
        <AddDepartment key='add-department-action' />,
    ]

'use client';
import { Button } from "@/components/ui/button";
import { CogIcon } from "lucide-react";

const AddDepartment = () => {
    return (
        <Button onClick={() => alert('testing')}>
            <CogIcon key="settings-action" className="h-7 w-7 text-gray-500 hover:text-gray-200 duration-300 cursor-pointer hover:animate-[spin_5s_ease-in-out_infinite]" />
        </Button>
    );
}
export default AddDepartment;

DirtyCajunRice | AppDir

2023-10-09T02:28:54.000Z

generally you dont want to put components into stored arrays

you are loading more data than you need on the client

Transvaal lionOP

2023-10-09T02:29:25.000Z

should i just pass them as children then?

@Transvaal lion should i just pass them as children then?

DirtyCajunRice | AppDir

2023-10-09T02:30:07.000Z

based on condition, yeah

Transvaal lionOP

2023-10-09T02:30:32.000Z

Thanks for the catch â¤ï¸

<SecondaryNav title="Departments" breadcrumbs={departmentConfig.admin.breadcrumbs} statistics={statistics} actions={
                <>
                    <AddDepartment key='add-department-action' />
                </>}
            />

DirtyCajunRice | AppDir

2023-10-09T02:36:26.000Z

why are you adding a key

keys are for arrays

if its not in an array it doesnt need a key

Transvaal lionOP

2023-10-10T20:07:52.000Z

thank youuuu, removing it rn