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

[elviocb]

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?

[jamuhl]

Are you sure...if i see it right we pass down props: https://github.com/i18next/react-i18next/blob/master/src/withTranslation.js#L10

[arichter83]

I have the same issue:

W20190225-19:49:52.259(1)? (STDERR) TS2345: Argument of type 'typeof List' is not assignable to parameter of type 'ComponentType<WithTranslation>'.
W20190225-19:49:52.259(1)? (STDERR)   Type 'typeof List' is not assignable to type 'ComponentClass<WithTranslation, any>'.
W20190225-19:49:52.259(1)? (STDERR)     Types of parameters 'props' and 'props' are incompatible.
W20190225-19:49:52.259(1)? (STDERR)       Type 'WithTranslation' is missing the following properties from type 'Readonly<IProps>': search, loading

for:

import { withTranslation } from 'react-i18next';
import i18n from 'i18next';

interface IProps {
  search: String
  loading: boolean
  t: i18n.TFunction
}

interface IState {
}

class List extends React.Component <IProps, IState> {
...
}

export const TranslatedList = withTranslation()(List)
export { TranslatedList as List }

[jamuhl]

Just retested with the sample in the example folder props get passed down...must be something with typescript whatever...

[arichter83]

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.

[jamuhl]

@rosskevin seems more related to typescript - might i ask for your help?

[rosskevin]

@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.

[arichter83]

@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).

[rosskevin]

@arichter83 it's a pretty common typescript pattern. In these cases you'll have to step into the definition for the hoc to make sense of things, but the error you received is actually quite informative:

W20190225-19:49:52.259(1)? (STDERR) TS2345: Argument of type 'typeof List' is not assignable to parameter of type 'ComponentType<WithTranslation>'.

I don't think we need to add docs as much as get used to tsc providing accurate messages.

[arichter83]

@rosskevin You are totally right, thanks for the feedback!

[eric-burel]

Hi, using WithTranslation solves the issue but makes testing difficult as your component not only expect a t function, but also another set of props.
Don't we need another kind of interface, a looser compromise between WithT and WithTranslation?

[eric-burel]

Imo it is incorrect to wrap systematically component props with a full fledged WithTranslation interface when you only use t. This makes stateless components too aware of 3rd party dependencies, especially from a valid i18n object, which you may not have during testing.
I don't get why WithT is not enough for withTranslation() though.

[bhagyas]

I stumbled upon after upgrading the react-i18next.

What is your option if you are using types instead of interfaces to define props for a components?

[danielvlasceanu]

@bhagyas try something like this:

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