How to define props in Typescript when a parent component injects props in its children?

Question

When a component clones its children to inject props into them, how to define the children props type?

I'm receiving an error cause injectedProps is expected in Child

const Parent: React.SFC<ParentProps> = ({ children }) => (
  <div>
    {React.cloneElement(children[0], { injectedProp: 'foo' })}
  </div>
);

const Child: React.SFC<ChildProps> = ({ injectedProp }) => (
  <div attr={injectedProp} />
);

type ChildProps = {
  injectedProp: string;
};

<Parent>
  <Child />
</Parent>

Error in Child: injectedProp is missing

`injectedProp` not included in `ChildProps` – xadm Sep 20 '18 at 10:54 — xadm, Sep 20 '18 at 10:54
I forgot to edit the type for SO :p – Ramon Balthazar Sep 20 '18 at 13:06 — Ramon Balthazar, Sep 20 '18 at 13:06
make it optional or give default parameter value – xadm Sep 20 '18 at 13:23 — xadm, Sep 20 '18 at 13:23

score 2 · Answer 1 · answered Sep 22 '18 at 17:55

This code pattern can't be typed properly in TypeScript and is ugly if you ask me. Instead, consider passing a function that takes the injected prop and creates the final children:

interface ParentProps {
  children: (childProps: ChildProps) => React.ReactNode;
}

const Parent: React.SFC<ParentProps> = ({ children }) => (
  <div>
    {children({ injectedProp: 'foo' })}
  </div>
);

const Child: React.SFC<ChildProps> = ({ injectedProp }) => (
  <div title={injectedProp} />
);

type ChildProps = {
  injectedProp: string;
};

function foo() {
  return <Parent>
    {childProps => <Child {...childProps} />}
  </Parent>
}

How to define props in Typescript when a parent component injects props in its children?

1 Answers1