Home > Software design >  How to add type for react event function
How to add type for react event function

Time:08-14

I need help to add the type for handleRowClick which I am calling from one of the elements below. I did tried with React.ChangeEvent<HTMLElement> but it is giving me an error

This expression is not callable. Type 'ChangeEvent' has no call signatures.

This error I am getting onClick function onClick={() => handleRowClick(row.id)}. The screenshot is attached. The row.Id is string type.

const DataTableBody: FC<{ rows: Array<DataTableRow>, handleRowClick: any }> = ({ rows, handleRowClick }) => {
    return (
        <TableBody>
            {rows.map(row => (
                <TableRow key={row.id} onClick={() => handleRowClick(row.id)}>
                    {row.cells.map(({ id, value }) => (
                        <DataTableBodyCell key={id} value={value} />
                    ))}
                </TableRow>
            ))}
        </TableBody>
    );
};

Error Screenshot

CodePudding user response:

The click handler isn't an event, nor does it take the click event as a parameter, so you don't need to include it in the type. It looks like it only takes a string as a parameter, so all you need is

handleRowClick: (id: string) => void

and call it like:

onClick={() => { handleRowClick(row.id); }}
  • Related