React-i18next: `tReady` is not a valid property for React (16.2.0)

[olivierpascal]

Warning: React does not recognize the tReady prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase tready instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[jamuhl]

on which element do you get that?

[olivierpascal]

Oh sorry for the lack of context. Here is an example:

import { translate } from 'react-i18next';

const MyComponent = ({ children, ...props }) => (
  <div {...props}>
    {children}
  </div>
);

export default translate('myNamespace')(MyComponent);

[jamuhl]

And your "MyOtherComponent" is something like <div {...props}></div>

[olivierpascal]

Yes. I edit, for a clearer example.

[jamuhl]

doing <div {...rest}> is something you should avoid...be explicit on what attributes you need on a DOM element.

do something like:

import { translate } from 'react-i18next';

const MyComponent = ({ children, ...rest }) => (
  <div {_.pick(...rest, ['style', 'otherOkProp']}>
    {children}
  </div>
);

export default translate('myNamespace')(MyComponent);

[olivierpascal]

It makes sense. And if I need to forward t or tReady properties I'd rather forward them via data-t or data-tReady DOM attributes.

[oliviertassinari]

Same problem. I will destructure the tReady property from the properties.

[onlydave]

Should tReady be added to the react-i18next DefinitelyTyped file?

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-i18next/src/props.d.ts

[jamuhl]

@onlydave should yes...the typescript definitions are maintained by the community...so you will have to create a PR there if like to have that in.

[onlydave]

@jamuhl should tReady is always present and a boolean or is it optional?

[jamuhl]

both hoc and render prop will pass it down:

hoc: https://github.com/i18next/react-i18next/blob/master/src/translate.js#L66
renderprop: https://github.com/i18next/react-i18next/blob/master/src/I18n.js#L123

[jamuhl]

and yes boolean true or false