Correct way to use Trans component and how to pass variables; incomplete docs

i18next 11.3.2 react-i18next 7.6.1

By reading the docs, it is unclear to me (from the simple example with no context located at https://react.i18next.com/components/trans-component; the linked source has nothing to do with the provided code snippet - where does Arthur value comes from?) as to how to pass variable values when using Trans component. For example:

Foo.tsx (snippet for clarity):

<Trans i18nKey="objects.errors.unknownType.content">
    Object with ID <strong>{this.props.objectId}</strong> is of unknown type.
    Go back to <a
        href="/objects"
        onClick={this.handleNavigationHrefClick}
    >
        Objects
    </a> route.
</Trans>

en.json (snippet for clarity):

"objects": {
    "errors": {
        "unknownType": {
            "title": "Unknown Object Type",
            "content": "Object with ID <1>{{id}}</1> is of unkown type. Go back to <3>Objects</3> route."
        }
    }
}

I get:

react-i18next: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}. __ACTUAL_VALUE_HERE__

I also tried (by guessing) tOptions={{id: this.props.objectId}} with no luck.

What is the correct way to use Trans component and pass variable values to it?

[vladeck]

Got it working. I’ll leave working code here (so you can compare), for future references:

Foo.tsx (snippet for clarity):

const id = this.props.objectId;

<Trans i18nKey="objects.errors.unknownType.content">
    Object with ID <strong>{{id}}</strong> is of unknown type.
    Go back to <a
        href="/objects"
        onClick={this.handleNavigationHrefClick}
    >
        Objects
    </a> route.
</Trans>

en.json (snippet for clarity):

"objects": {
    "errors": {
        "unknownType": {
            "title": "Unknown Object Type",
            "content": "Object with ID <1><0>{{id}}</0></1> is of unknown type. Go back to <3>Objects</3> route."
        }
    }
}

[geraman21]

@jamuhl but then doesn’t it feel like I am just writing redundant text there ? My i18nKey already points at a translation string and I don’t see the reason for rewriting the English version of it. This point can be maybe added to the Documentation, I am sure many people will find it helpfull.