React children is a function: How to define TypeScript type correctly?

Question

I have a small React Component where the child is a function. I can't seem to figure out how to define the children prop in TypeScript.

class ClickOutside extends React.PureComponent<Props, {}> {
  render() {
    const { children } = this.props;

    return children({ setElementRef: this.setElementRef });
  }
}

I'm calling it this way:

<ClickOutside onOutsideClick={() => this.setState({ isOpen: false })}>
  {({ setElementRef }) => (
    <div ref={setElementRef}>
      {trigger}
      {children}
    </div>
  )}
</ClickOutside>

And this is what I tried to define the prop but it does not work at all. I have tried several other things but failed and I'm kinda lost here.

type Props = {
  children: ({ setElementRef: (el: HTMLElement) => any }) => React.ReactNode,
  onOutsideClick: Function,
}

EDIT:

This produces ';' expected. on =>

When I change the type definition this way:

type Props = {
  children: ({ setElementRef: (el: HTMLElement) => any }),
  onOutsideClick: Function,
}

It produces this error:

Cannot invoke an expression whose type lacks a call signature. Type '{ setElementRef: (el: HTMLElement) => any; } | ({ setElementRef: (el: HTMLElement) => any; } & string) | ({ setElementRef: (el: HTMLElement) => any; } & number) | ({ setElementRef: (el: HTMLElement) => any; } & false) | ({ ...; } & true) | ({ ...; } & ReactElement<...>) | ({ ...; } & ReactNodeArray) | ({ ...; } & Re...' has no compatible call signatures.

Are you returning an array of ReactNodes maybe? I'd need to look at the ts error — Fernando Salas
– Fernando Salas, Commented May 15, 2019 at 16:38

jaws · Accepted Answer · 2019-05-19 18:24:13Z

6

You need to define the type of setElementRef in the de-structured object parameter of the children prop:

type Props = {
 children(options: { setElementRef(el: HTMLElement): any } ): React.ReactNode;
};

Remember that when de-structuring an object, the : symbol performs its JavaScript duties and reassigns a property name, whereas in this example you're expecting it to designate a type.

answered May 19, 2019 at 18:24

jaws

2,0224 gold badges21 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

React children is a function: How to define TypeScript type correctly?

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