How to pass a function as a parameter in typescript functional component

Question

I want to pass a function and a number as parameters to a typescript functional component, I used the any keyword and there wasn't any error from the ide but when i ran the code, the error from the browser's console was the following. using javascript the code works as expected, please any idea how i can fix this error

react-dom.development.js:4054 Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `object` type.
    at getListener (react-dom.development.js:4054:1)
    at accumulateSinglePhaseListeners (react-dom.development.js:9317:1)
    at extractEvents$4 (react-dom.development.js:8976:1)
    at extractEvents$5 (react-dom.development.js:9004:1)
    at dispatchEventsForPlugins (react-dom.development.js:9096:1)
    at react-dom.development.js:9288:1
    at batchedUpdates$1 (react-dom.development.js:26140:1)
    at batchedUpdates (react-dom.development.js:3991:1)
    at dispatchEventForPluginEventSystem (react-dom.development.js:9287:1)

Uncaught TypeError: handleDrawerToggle is not a function

// Typescript
const App = () => {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const drawerWidth = 240;
  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };
  return (
    <div>
      <Sample
        handleDrawerToggle={handleDrawerToggle}
        drawerWidth={drawerWidth}
      />
      {mobileOpen && <h1>hello</h1>}
    </div>
  );
};

const Sample = ( handleDrawerToggle:any, drawerWidth:any ) => {
  return (
    <div>
      <button onClick={handleDrawerToggle} style={{ width: `${drawerWidth}` }}>
        Testv
      </button>
    </div>
  );
};

handleDrawerToggle: () => void would be the correct signature for a function that takes no parameters and does not return anything. Don't use any here. — crashmstr
– crashmstr, Commented Jan 4, 2023 at 20:38

swedishcheef · Accepted Answer · 2023-01-04 20:39:39Z

2

Rather than passing as any, you can be more specific and pass it as () => void. I would also advice to add a prop type.

For example, type SampleProps = { handleDrawerToggle: () => void; drawerWidth: number }

So something like

const Sample = ({ handleDrawerToggle, drawerWidth }: SampleProps) => {
  return (
    <div>
      <button onClick={handleDrawerToggle} style={{ width: `${drawerWidth}px` }}>
        Testv
      </button>
    </div>
  );
};

answered Jan 4, 2023 at 20:39

swedishcheef

5772 gold badges12 silver badges28 bronze badges

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

Comments

OneQ · Accepted Answer · 2023-01-04 20:42:00Z

0

You forgot the {} for the props of you component :

const Sample = ({ handleDrawerToggle, drawerWidth }) => {
  return (
    <div>
      <button onClick={handleDrawerToggle} style={{ width: `${drawerWidth}` }}>
        Testv
      </button>
    </div>
  );
};

With your code handleDrawerToggle is like props if don't write the {} and props is an object.

edited Jan 4, 2023 at 20:42

answered Jan 4, 2023 at 20:30

OneQ

1,5071 gold badge13 silver badges17 bronze badges

2 Comments

john otor Over a year ago

with the curly bracket, it doesn't identify the any keyword and it gives more errors

OneQ Over a year ago

See the other answer to use typescript

BetterTeng · Accepted Answer · 2025-01-09 12:46:06Z

0

You need to define the Props type first.

type PropsType = {
  handleDrawerToggle: () => void; // function prop
  drawerWidth: number
}

const Sample: React.FC<PropsType> = ({ handleDrawerToggle, drawerWidth }) => {.....}

answered Jan 9 at 12:46

BetterTeng

4775 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to pass a function as a parameter in typescript functional component

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related