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:

react-i18next/test/trans.render.spec.jsx

Line 106 in badba25

describe('trans overwrites translation prop', () => {

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:

react-i18next/test/trans.render.spec.jsx

Line 131 in badba25

describe('trans simple with custom html tag', () => {

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

[adrai]

Feel free to provide a PR for that.

[jamuhl]

react-i18next/test/trans.render.spec.jsx

Line 91 in badba25

it('should render correct content', () => {

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)