react-i18next: withTranslation() HOC does not pass props down (Typescript)

I’m trying to pass down the props in a component wrapped with the withTranslation() HOC. Them problem is that this HOC does not pass down the props to the wrapped component.

class SpeedDialWrapper extends React.PureComponent<
  ISpeedDialWrapper,
  ISpeedDialState
> { ... }

export default withTranslation()(withStyles(styles as any, { withTheme: true })(
  SpeedDialWrapper
) as any);


// in another file

import SpeedDial from "../../../shared/components/speed-dial-wrapper.component";

class ScheduleSpeedDial extends React.PureComponent<
  ISpeedDialTheme,
  ISpeedDialState
> {
  public render() {
    return <SpeedDialWrapper actions={this.getActions()} />; // The withTranslation HOC interface does not accept any props
  }
}

I need to pass down the props for the wrapped component. How can I do that?

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 17 (5 by maintainers)

Most upvoted comments

@elviocb you did not provide enough information to reproduce, including the props and the error.

@arichter83 the library definition is correct as proven by https://github.com/i18next/react-i18next/pull/759/files.

Your definition of IProps is incorrect. It should be interface IProps extends WithTranslation {}.

I’m going to merge the PR above. If you have any test cases that fail, please PR a breaking test to the withTranslation.test.tsx file.

+38

rosskevin on Feb 26, 2019

@bhagyas try something like this:

interface IPropsA {...}
interface IPropsB extends WithTranslation {...}
type IProps = IPropsA & IPropsB

danielvlasceanu on May 6, 2020

@rosskevin / @jamuhl : perfect! Thank you. Maybe it is worth adding that to the documentation, I could find nothing on google for “extends WithTranslation” despite the index.d.ts containing it (which I was to stupid to find before).

arichter83 on Feb 26, 2019

Sure, It’s on my todo list 😅

pedrodurek on Nov 30, 2021

Hey @kendallroth, try like this:

interface Props extends WithTranslation<["common", "screens"]> {}

class Component extends React.Component<Props> {
  render() {
    const { t } = this.props;
    const message = t("screens:welcomeTitle");
    return <Text></Text>
  }
}

export default withTranslation(["common", "screens"])(Component);

pedrodurek on Nov 30, 2021

Yes, it is not about the props not beeing passed down, but the props description not beeing extended. Should be something like:

withTranslation(Component<P, S>): Component<P & TranslationProps, S>

But I couldn’t find any declarations, so I couldn’t test it.

arichter83 on Feb 26, 2019