Support passing of attributes from translation i.e. <0 href="web address"></0> to react component i.e. <a></a>

[chaosmaker]

I am currently building a webpage with multi language support with extensive language files and numerous inline links that I like to add with component. In some cases, I have multiple links within a single component. I think for readability it would be great if I could just add the attribute to a given <0></0> replacement component.

For example take the following translation file:

"privacy-test": {
  "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
  "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat",
  "list": [
     {
	"_id": 1,
	"title": "Curabitur pretium tincidunt lacus",
	"sublist": [
	  {
	    "_id": "1.1",
	    "title": "Sed ut perspiciatis, unde omnis iste natus error",
	    "text": "totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae<0></0>vitae dicta sunt, explicabo<0></0>Nemo enim ipsam voluptatem, quia voluptas sit<1 href=\"www.google.com\">www.google.com</1>"
	  }
      ]
    }
  ]
}

With a component as follows:

<Trans ...>
  <br/><a></a>
</Trans>

which I would like to result in:

<h1>Sed ut perspiciatis, unde omnis iste natus error</h1>
<p>totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae</br>vitae dicta sunt, explicabo</br>Nemo enim ipsam voluptatem, quia voluptas sit<a href=\"www.google.com\">www.google.com</a>.</p>

As I am using a loop I don't want to use the more standard way of having the text within the Trans component but just want to add the <0></0> counters into my many language files.
I don't think the passing of attributes is currently possible, or rather I haven't figured it out. I don't think it would be too difficult to implement. Would it be possible to have such a functionality?

[adrai]

I don’t know exactly what you want to do...
But here is an example with attribute...
just use t() https://react.i18next.com/latest/trans-component#using-with-react-components

[chaosmaker]

Well that is exactly what I don't want to do. While I have those versions in my files as well, they require me to specify a) how many t()s I will be adding and then I need to implement them as well. What I am after is if I have the following code:

list.map((title,text) => {
return(
<>
  <h1>{title}</h1>
  <Trans defaults={text}>
    </br><a></a>
  </Trans>
</>
)})

Where list is a translation object returned by

list = t('some.position', {returnObjects=true})

Then Trans will substitute <0></0> in my translation files with a </br> and <1></1> with the <a></a> (regardless of how many <1></1> I add). Now if I have a translation text that looks like this:

"test": {
  "list": [
    { 
       "title": "Hello there",
       "text": "Here are some links for you to consider<0></0><1>www.google.com</1><0></0><1>www.bing.com</1><0></0><1>www.letsgocrazy.com</1>"
  ]
}

So given the language translation above I would have to write </br><a href="www.google.com"></a><a href="www.bing.com"></a>... etc to replace those particular links with those a components including their href attribute. Because I don't know, or don't want to know how many there really are in that translation, and I run through a loop it would make more sense if I could just write the translations as <0 href=\"www.google.com\">www.google.com</0> which would then result in <a href="www.google.com">www.google.com</a> on the other side.

Does this make more sense?

[jamuhl]

attributes inside <0 ...> is not supported...and won't be supported. We would have to map HTML attributes to JSX props eg. class to className, ... won't happen...sorry

[chaosmaker]

Ok naive question here maybe. Why would you have to map it? Couldn't you just parse it and provide as ...?
Leave it up to the user to add the right one?

If not is there a way to know which substitution is currently being made? So I can have a secondary array with the links separatly and add them as properties then via t?

[jamuhl]

Open to a PR...?

[chaosmaker]

I'm not sure what you are asking?

[jamuhl]

If you like something supported - provide a pull request for it.

Else work with the options you have.

[chaosmaker]

Wow so nice 😂 - thanks for your help!

[jamuhl]

Look...I can understand your feature request and you think it is simple to add. So why not creating a PR to help others in the future having the same request?

[chaosmaker]

Because although I am versed in many languages, javascript and ES2015 just isn't my home. Having said that it seems that all that needs doing is adding
child.props = Object.assign(child.props,node.attrs); in function mapAST in the Trans component and it should work but I am getting Cannot assign to read only property 'props' of object errors even though I have changed const child... to let child and various other objects in that function so I am not sure where I am going wrong.

[adrai]

This is because of React...
You cannot modify props; since component properties are read-only, as the error states. Props can only be derived from a parent component, but cannot be modified.

This article is a great starting point for people confused in this matter: https://reactjs.org/docs/thinking-in-react.html

My advice: If you like to see this feature land, take the chance and learn React...