Getting "This expression is not callable" in Typescript React Application

Question

I'm trying to separate my logic from my layout component in a Typescript React Application, but I think there's something wrong with the return type of my controller return object.

I tried the following to make a type which indicates which is the return type but typescript is complaining

controller.tsx, here i got:

TS2322: Type '() => { iconsList: floatingNavbarItem[]; value: string; handleChange: (event: SyntheticEvent, newValue: string) => void; }' is not assignable to type 'ControllerFN'.

type ControllerFN = {
    iconsList: floatingNavbarItem[];
    value: string;
    // eslint-disable-next-line no-unused-vars
    handleChange: (event: SyntheticEvent, newValue: string) => void;
};

const floatingNavbarController: ControllerFN = () => {
  const [value, setValue] = useState('addPlan');

  const handleChange = (event: SyntheticEvent, newValue: string) => {
    setValue(newValue);
  };

  const iconsList:floatingNavbarItem[] = useMemo(
    () => [
      {
        value: 'addPlan',
        label: 'addPlan',
        icon: <FontAwesomeIcon icon={faCirclePlus} />,
      },
    ],
    [],
  );

  return { iconsList, value, handleChange };
};

floatingNavbar.jsx

const FloatingNavbar: FunctionComponent = () => {
  const { iconsList, value, handleChange } = floatingNavbarController();
  return (
    <Navbar
      value={value}
      onChange={handleChange}
    >
      <FloatingNavbarItem iconsList={iconsList} />
    </Navbar>
  );
};

Here I got:

TS2349: This expression is not callable. Type 'ControllerFN' has no call signatures.

when I call floatingNavbarController(); at line 2

and

TS2322: Type '{ iconsList: any; }' is not assignable to type 'IntrinsicAttributes & floatingNavbarItem[]'. Property 'iconsList' does not exist on type 'IntrinsicAttributes & floatingNavbarItem[]'.

at props iconsList at line 8

What am I doing wrong? Any ideas?

Joe Clay · Accepted Answer · 2022-07-05 12:01:00Z

2

By writing const floatingNavbarController: ControllerFN, you're saying that the variable floatingNavbarController has the type ControllerFN.

But that's not true - floatingNavbarController is a function that returns ControllerFN.

I think what you're looking for is this:

type ControllerFN = () => {
    iconsList: floatingNavbarItem[];
    value: string;
    // eslint-disable-next-line no-unused-vars
    handleChange: (event: SyntheticEvent, newValue: string) => void;
};

const floatingNavbarController: ControllerFN = () => {
// ...

answered Jul 5, 2022 at 12:01

Joe Clay

36.1k6 gold badges94 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting "This expression is not callable" in Typescript React Application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related