Typescript React empty function as defaultProps

Question

I have a Stateless Functional Component with an optional function parameter as property (onClick), I tried to define an empty function as default property to be able to do safely in my component :

 <span onClick={props.onClick} />

But I have the following error : 'Expression expected.'

interface IProps {
  size?: sizeType;
  onClick?: (e:any) => void;
}
const Foo: React.SFC = (props: IProps) => {
  // ...
};
const defaultProps: IProps = {
   size: 'default',
   onClick: () => void <-- Expression expected.
};
Foo = defaultProps;

How can I should do this?

Can you please add the code of IProps to your question?

Remo H. Jansen
– Remo H. Jansen

2017-11-22 15:39:07 +00:00
Commented Nov 22, 2017 at 15:39 — Remo H. Jansen
– Remo H. Jansen, Commented Nov 22, 2017 at 15:39
I added the interface

Fabrice
– Fabrice

2017-11-22 15:51:00 +00:00
Commented Nov 22, 2017 at 15:51 — Fabrice
– Fabrice, Commented Nov 22, 2017 at 15:51

Daniel Derevjanik · Accepted Answer · 2017-11-22 15:51:58Z

34

You cannot use void in javascript as return value. Instead of void, use null as return value.

onClick: () => null

answered Nov 22, 2017 at 15:51

Daniel Derevjanik

3401 gold badge2 silver badges5 bronze badges

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

Comments

Remo H. Jansen · Accepted Answer · 2017-11-22 15:56:21Z

12

You can use the following:

const defaultProps: IProps = {
   size: 'default',
   onClick: () => void(0)
};

answered Nov 22, 2017 at 15:56

Remo H. Jansen

25.2k13 gold badges73 silver badges99 bronze badges

Comments

Scott Stern · Accepted Answer · 2018-10-08 17:52:54Z

6

I think using lodashes noop might be a good option because depending on the number of re-renders the component will have BEFORE the component has access to the prop, it will create that many references to an anonymous function that essentially is a place holder for the function you need. Something like:

import noop from 'lodash/noop';
MyComponent.defaultProps = {
  myfunc: noop,
};

Its a small optimization but also prevents the developer from creating an anonymous function for every default prop declaration that a func is needed in.

answered Oct 8, 2018 at 17:52

Scott Stern

741 silver badge4 bronze badges

Comments

1252748 · Accepted Answer · 2018-03-05 20:36:49Z

3

I usually do

MyComponent.defaultProps = {
  someNoop: f => f
}

as something that is short, easy to type, and will just return undefined.

answered Mar 5, 2018 at 20:36

1252748

15.5k35 gold badges118 silver badges244 bronze badges

Collectives™ on Stack Overflow

Typescript React empty function as defaultProps

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related