Problem

I want to add events to a client component that has a server component as a parent component, but I get an error.

Message Error:

Error: Event handlers cannot be passed to Client Component props. <... className=... onChange={function}> ^^^^^^^^^^ If you need interactivity, consider converting part of this to a Client Component.

Things I've tried

• I created an "intermediary" file, we could call it, but as I imagined, the same thing happened.
• I tried to make the parent component the client component, but it asks me that it must be a server component.
• I tried to make the "Input" component a server component, but the problem is in the tag that comes by default from HTML, which is a client component.

Explication

I have a parent component that is a server component since it will make connections to the database, which is the following:

"use server"

import "./Filtro.css"
import { EntityMetadata, EntityTarget, ObjectLiteral } from "typeorm"
import { GetColumns } from "@/SQL/SQLManager"
import { Calendar } from "../Calendar/Calendar"
import { Circle } from "../Polygons/Circle/Circle"
import Image from "next/image"
import { ColumnSearch } from "./_components/ColumnSearch/ColumnSearch"

type FilterProps<T> = { 
    entity: EntityTarget<T>, 
    except?: string[]
}

export async function Filter<T extends ObjectLiteral>({ entity, except } : FilterProps<T>) {
    const columns = (await GetColumns(entity))
        .filter((column) => 
            except != null ? except.indexOf(column.propertyName) : true
        );
    
    const changeEvent = (value: string) => {
        console.log(value);
    }

    return (
        <div className="filter-container">

            <div className="flex items-center gap-3.5 mb-3.5">
                {/* <div className="filter-circle"></div> */}
                <Circle width={40} height={40} className="bg-primary"/>
                <h2 className="text-2xl font-bold">Filtros</h2>
            </div>
            
            <div className="bg-section rounded-xl px-4 py-5">
                {
                    columns.map((column) => {
                        return <ColumnSearch 
                            entity={entity}
                            column={column}
                            className="bg-white text-black p-1.5 rounded-xl"
                            onInputChange={changeEvent}
                            />
                    })
                }
                
                <div className="relative mt-3.5">

                    <input type="text" className="filter-input p-2.5 rounded-3xl" placeholder="Buscar"/>
                    
                    <Image className="filter-magnifier" src="/white/svg/Magnifier.svg" width="24" height="24" alt="Magnifier"/>
                </div>
            </div>
        </div>
    )
}

But the object it calls (ColumnSearch) is also a server object, which can be either an Input or a Calendar, here is the code:

import { Calendar } from "@/components/Calendar/Calendar"
import { EntityTarget, ObjectLiteral } from "typeorm"
import { ColumnMetadata } from "typeorm/metadata/ColumnMetadata.js"
import './ColumnSearch.css'
import { Input } from "@/components/Input/Input"

type ColumnSearchProps<T> = {
    entity: EntityTarget<T>,
    column: ColumnMetadata,
    className?: string,
    onInputChange?: (value: string) => void
}

export async function ColumnSearch<T extends ObjectLiteral>({ entity, column, className, onInputChange } : ColumnSearchProps<T>) {
    console.log(column.type)

    return <div className='filter-option relative flex justify-between items-center cursor-pointer text-lg py-3.5'>
        {column.propertyName.replace("_", " ")}

        {
            column.type != Date ? 
                <Input className={className}/> : //onChange={onInputChange ? (e) => onInputChange(e.target.value) : undefined}
                <Calendar className={className}/>
        }
    </div>
}

But the component that calls ColumnSearch (Input) is actually an HTML input and this is a client component, the problem is that I want to add events to it but it won't let me because the parent component is a server component, here is the code:

"use client"

import { ChangeEventHandler, RefObject, useRef } from "react"

type InputProps = {
    className?: string,
    onChange?: ChangeEventHandler<HTMLInputElement>,
    ref?: RefObject<HTMLInputElement>
}

export function Input({ className, onChange, ref } : InputProps) {
    return <input className={className} onChange={onChange} ref={ref}/>
}

Answer

You can not.

Event handlers cannot be passed to Client Component, if you need interactivity, consider converting part of this to a Client Component.

In Nextjs, a server component can not pass a function to a client component.

Why not converting ColumnSearch to a client component? You can pass the data to your client component, and let it handle DOM logic.

If you want to keep Filter component as a server component responsible of fetching your data, it should not handle UI events..etc Let client components handle the UI.