How to solve Type Property '' does not exist on type 'IntrinsicAttributes & Function'?

Question

I have a parent component like so

import filterComponent from 'filter/filterComponent'


  const reloadHandler = useCallback(
    (event: MouseEvent) => {
      event.preventDefault();
     // my logic
    },
    [Reload, Fetching]
  );

const parent = () => { 
return (
    <filterComponent reload={reloadHandler} /> 
   )
}

Filter Component:

export const filterComponent = (filter: Function, reload: Function) => { 
    return (
       <Button onClick={reload} />
   )
}

error:

Type '{ reload: (e: MouseEvent) => void; }' is not assignable to type 'IntrinsicAttributes & Function'. Property 'reload' does not exist on type 'IntrinsicAttributes & Function'

How do I solve this?

Alexey Kureev Alexey Kureev · Accepted Answer · 2020-01-21T14:19:24

I think it complains about the way you access properties in FilterComponent. Try this version:

type FilterComponentProps = {
  reload: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,
};

export const FilterComponent = (props: FilterComponentProps) => { 
 return <button onClick={props.reload} />;
}

and then the component that calls it:

function SomeComponent() {
  const reloadHandler = React.useCallback(
    (event: React.MouseEvent) => {
      event.preventDefault();
      // my logic
    },
    // I've removed dependencies as I'm not sure where you take them from
    [] 
  );
  return (
    <FilterComponent reload={reloadHandler} /> 
  )
}

Also note that I've changed filterComponent to be FilterComponent as lowercase component namespace is reserved for HTML primitives

I've also composed you a CodeSandbox (just in case): https://codesandbox.io/s/react-typescript-3i7cm

How to solve Type Property '' does not exist on type 'IntrinsicAttributes & Function'?

1 Answers