Assuming you have following ponent that accepts one or more child JSX.Elements and passes extra callback to their props when they are rendered by using React.cloneElement(child, { onCancel: () => {} }.

Component in question (excerpt):

interface XComponentProps {
    onCancel: (index: number) => void;
}

class XComponent extends React.Component<XComponentProps> {
    render() {
        const { onCancel } = this.props;
        const children = typeof this.props.children === 'function' ?
            React.cloneElement(this.props.children, { onCancel: () => onCancel() }) :
            this.props.children.map((child, idx) => (
                React.cloneElement(child, { onCancel: () => onCancel(idx) })
            ));
        return <div>{children}</div>;
    }
}

Component in question in action (excerpt):

interface UserComponentProps { caption: string }
const UserComponent = (props: UserComponentProps) => (
    <button onClick={props.onClose}>{props.caption || "close"}</button>
);

ReactDOM.render(
    <XComponent onCancel={handleCancel}>
        <UserComponent />
        <UserComponent />
        <UserComponent />
    </XComponent>
);

Right now TSC is plaining that UserComponent does not have onCancel in its props' interface definition, which indeed does not. One easiest fix is to manually define onCancel to UserComponentProps interface.

However, I want to fix it without modifying child node's prop definition so that the ponent can accept arbitrary set of React elements. In such scenario, is there a way to define typings of returning elements that has extra implicit props passed at the XComponent (parent) level?

Assuming you have following ponent that accepts one or more child JSX.Elements and passes extra callback to their props when they are rendered by using React.cloneElement(child, { onCancel: () => {} }.

Component in question (excerpt):

interface XComponentProps {
    onCancel: (index: number) => void;
}

class XComponent extends React.Component<XComponentProps> {
    render() {
        const { onCancel } = this.props;
        const children = typeof this.props.children === 'function' ?
            React.cloneElement(this.props.children, { onCancel: () => onCancel() }) :
            this.props.children.map((child, idx) => (
                React.cloneElement(child, { onCancel: () => onCancel(idx) })
            ));
        return <div>{children}</div>;
    }
}

Component in question in action (excerpt):

interface UserComponentProps { caption: string }
const UserComponent = (props: UserComponentProps) => (
    <button onClick={props.onClose}>{props.caption || "close"}</button>
);

ReactDOM.render(
    <XComponent onCancel={handleCancel}>
        <UserComponent />
        <UserComponent />
        <UserComponent />
    </XComponent>
);

Right now TSC is plaining that UserComponent does not have onCancel in its props' interface definition, which indeed does not. One easiest fix is to manually define onCancel to UserComponentProps interface.

However, I want to fix it without modifying child node's prop definition so that the ponent can accept arbitrary set of React elements. In such scenario, is there a way to define typings of returning elements that has extra implicit props passed at the XComponent (parent) level?

• javascript
• reactjs
• typescript
• typescript-typings

5 Answers 5

It is not possible. There is no way to know statically what props UserComponent receives from parent XComponent in your ReactDOM.render context.

If you want a type safe solution, use children as functions:

Here is XComponent definition

interface XComponentProps {
    onCancel: (index: number) => void;
    childrenAsFunction: (props: { onCancel: (index: number) => void }) => JSX.Element;
}

class XComponent extends React.Component<XComponentProps> {
    render() {
        const { onCancel } = this.props;
        return <div>{childrenAsFunction({ onCancel })}</div>;
    }
}

Now you can use it to render your UserComponents

<XComponent onCancel={handleCancel} childrenAsFunction={props => 
  <span>
    <UserComponent {...props} />
    <UserComponent {...props} />
  </span>
} />

This will work nicely, I use this pattern often with no hassle. You can refactor XComponentProps to type the childrenAsFunction prop with the relevant part (the onCancel function here).

You can use interface inheritance (see Extending Interfaces) and have UserComponentProps extend XComponentProps:

interface UserComponentProps extends XComponentProps { caption: string }

This will give UserComponentProps all the properties of XComponentProps in addition to its own properties.

If you don't want to require UserComponentProps to have all the properties of XComponentProps defined, you can also use Partial types (see Mapped Types):

interface UserComponentProps extends Partial<XComponentProps> { caption: string }

This will give UserComponentProps all the properties of XComponentProps, but makes them optional.

You can pass children as a function, even in JSX. This way you will get proper typing all the way. UserComponents props interface should extend ChildProps.

interface ChildProps {
    onCancel: (index: number) => void;
}

interface XComponentProps {
    onCancel: (index: number) => void;
    children: (props: ChildProps) => React.ReactElement<any>;
}

class XComponent extends React.Component<XComponentProps> {
    render() {
        const { onCancel } = this.props;
        return children({ onCancel })};
    }
}


<XComponent onCancel={handleCancel}>
    { props => <UserComponent {...props} /> } 
</XComponent>

As @Benoit B. said:

It is not possible. There is no way to know statically what props UserComponent receives from parent XComponent in your ReactDOM.render context.

That said, there is an alternative to achieve that, using a High Order Component to wrap UserComponent (not modifying it, maybe renaming if it makes sense):

type RawUserComponentProps = Pick<XComponentProps, 'onCancel'> & {
  caption: string;
};

const RawUserComponent = (props: RawUserComponentProps) => {
  return <>...</>;
};

type UserComponentProps = Omit<RawUserComponentProps, 'onCancel'> & Pick<Partial<RawUserComponentProps>, 'onCancel'>;

export const UserComponent = (props: RawUserComponentProps) => {
  if (props.onCancel == null) {
    throw new Error('You must provide onCancel property');
  }
  return <RawUserComponent {...props} />;
};

You can also simplify that Omit & Pick to a MakeOptional type helper:

type MakeOptional<TObject, TKeys extends keyof TObject> = Omit<TObject, TKeys> & Pick<Partial<TObject>, TKeys>;

type UserComponentProps = MakeOptional<RawUserComponentProps, 'onCancel'>;

UPDATE: SOLUTION 2021

Ran into this problem and have since figured out a neat workaround:

Gonna use a Tabs ponent as an example but it's the same problem being solved (i.e. keeping TS happy when dynamically adding props to child ponents, from the parent).

ponents/Tabs/Tab.tsx

// Props to be passed in via instantiation in JSX
export interface TabExternalProps {
  heading: string;
}

// Props to be passed in via React.Children.map in parent <Tabs /> ponent
interface TabInternalProps extends TabExternalProps {
  index: number;
  isActive: boolean;
  setActiveIndex(index: number): void;
}

export const Tab: React.FC<TabInternalProps> = ({
  index,
  isActive,
  setActiveIndex,
  heading,
  children
}) => {
  const className = `tab ${isActive && 'tab--active'}`;
  return (
    <div onClick={() => setActiveIndex(index)} {...className}>
      <strong>{heading}</strong>
      {isActive && children}
    </div>
  )
}

ponents/Tabs/Tabs.tsx

import { Tab, TabExternalProps } from './Tab'; 

interface TabsProps = {
  defaultIndex?: number;
}
interface TabsComposition = {
  Tab: React.FC<TabExternalProps>;
}

const Tabs: React.FC<TabsProps> & TabsComposition = ({ children, defaultIndex = 0 }) => {
  const [activeIndex, setActiveIndex] = useState<number>(defaultActiveIndex);
  const childrenWithProps = React.Children.map(children, (child, index) => {
    if (!React.isValidElement(child)) return child;
    const JSXProps: TabExternalProps = child.props;
    const isActive = index === activeIndex;
    return (
      <Tab
        heading={JSXProps.heading}
        index={index}
        isActive={isActive}
        setActiveIndex={setActiveIndex}
      >
        {React.cloneElement(child)}
      </Tab>
    )
  })
  return <div className='tabs'>{childrenWithProps}</div>
}

Tabs.Tab = ({ children }) => <>{children}</>

export { Tabs }

App.tsx

import { Tabs } from './ponents/Tabs/Tabs';

const App: React.FC = () => {
  return(
    <Tabs defaultIndex={1}>
      <Tabs.Tab heading="Tab One">
        <p>Tab one content here...</p>
      </Tab>
      <Tabs.Tab heading="Tab Two">
        <p>Tab two content here...</p>
      </Tab>
    </Tabs>
  )
}

export default App;