Overriding React component props

[Jastrzebowski]

Documentation issue

I have an issue with the Trans Component Overriding React component props behaviour. I checked the Trans tests, and there is no test for Overwriting props; once I add one, it's failing. Is it a feature removed from the code but left in the documentation?

For

/**
 * With messages:
 * myKey: 'This is a <CustomLink href="https://example.com/en-EN">link to example.com</CustomLink>.'
 **/  

<Trans
  i18nKey="myKey"
  components={{ 
    CustomLink: <a href="value-to-be-overridden"/> 
    }}
/>

Existing behaviour

This is a <a href="value-to-be-overridden">link to example.com</a>.

Expected behaviour

This is a <a href="https://example.com/en-EN">link to example.com</a>.

Motivation

I want to fix the flows in the documentation and, at best, bring back the props substitution. The use case with links seems valuable, especially when using Routing. However, I can see additional ones, such as using icons as a component.

[adrai]

Here is the test: https://github.com/i18next/react-i18next/blob/badba254ccdd16145f5b0628babaad1efffc8448/test/trans.render.spec.jsx#L106 with this key: https://github.com/i18next/react-i18next/blob/master/test/i18n.js#L44

[Jastrzebowski]

Thank you, @adrai! The test is different than the examples in the documentation with custom components. The corresponding one I was looking at yesterday is: https://github.com/i18next/react-i18next/blob/badba254ccdd16145f5b0628babaad1efffc8448/test/trans.render.spec.jsx#L131

Would that mean the costume tags were never meant to have overwriteable props?

[adrai]

Feel free to provide a PR for that.

[jamuhl]

https://github.com/i18next/react-i18next/blob/badba254ccdd16145f5b0628babaad1efffc8448/test/trans.render.spec.jsx#L91 if the code has no prop it should pick from translation string...

honestly...idk...but setting props from translations is another pandora's box

If I remember right sole reason to introduce this was to allow for some keepBasicHtmlTags that contained links...but not to allow full props replacement (therefore also component props if existing win over translations)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sam-shift72]

I ran into this issue too today. The documentation is wrong, and it seems that any props defined in the components take precedence over values parsed from the translation string.

<Trans
  i18nKey="myKey"
  components={{ 
    CustomLink: <a /> 
    }}
/>

Seems to provide the expected result (the href from the translation string will be used)