Extraction when using variables as translation id and message

[danielmontane]

I am trying to build a reusable React component that includes translation, so that I can avoid repeating structures such as xxx and just plainly use a single passing the translation id and content as children.

If I take this approach:

const Text = ({ transId }) => {
  return <Trans id={transId} />;
};

and call it like this:
<Text transId={t({id: 'test-translation', message: 'This is my super test'})} />

this id and string get correctly extracted.

However, if I use this approach, which would be the ideal for the purpose of the task:

const Text = ({ transId, children }) => {
  const content = t({
    id: transId,
    message: children
  })
  return <Trans id={content} />;
};

and call it like this:

<Text transId='test-translation'>
  This is my super test
</Text>

then the extractor doesn't seem to find the translation.

Is there any way that I could make the second approach work?

[thekip]

Is there any way that I could make the second approach work?

No

[danielmontane]

Alright, any solution then to having a reusable Text component that includes translation or the approach should always be nested?

[thekip]

look at the defaultComponent here: https://lingui.dev/ref/react#lingui-context

[danielmontane]

thanks! That's interesting, I'll take a look 👁️

[danielmontane]

Ok, I see the approach! Would be nice if the defaultComponent could be a component that takes any custom props. But fair enough for now I guess! Thanks for your help 🙇