How to use Trans Macro or "t" tag within a map function? Also how to preserve line break styling?

[crazyyi]

For example, I am using Nextjs. I have a FAQ array, and both of the questions and answers are strings or ReactNodes.

I am doing this:

    const FAQs = {
      "question1": "ans1",
      "question2": (() => {
           return (<>
               <div><Link><Trans>Click me</Trans></Link></div>
                <Trans>...</Trans>
                <div><Link><Trans>Also click me</Trans></Link></div>
            </>)
       })(),
      "question3": {`ans3\n 
                              This is another line.
                              This is another line.`},
      "question4": "ans4\n This is another line."
    }
    const questions = Object.keys(FAQs);
    const answers = Object.values(FAQs);

   return (
    <>
    questions.map((v, i) => {
        return (
        <>
           <div><Trans>{v}</Trans></div>
           <div><Trans>{answers[i]}</Trans></div>
        </>
        )
    }
    </>
    )

But lingui extract doesn't return questions at all. It would just generate {0}:{0}. And same for answers. It simply skips translating the answers. I have to move Trans macros into the array to make it work which is not the most efficient way.

One more issue is that if I use the Trans or t macro in the array, the macro would remove the line breaks inside ``, which makes the styling disappear. Originally I don't have to put line break character inside ``. But after adding Trans macro seems I can only add back '\n' to resolve this styling.

[thekip]

Translating from variables is not going to work

// Wrong!
<>
  <div><Trans>{v}</Trans></div>
  <div><Trans>{answers[i]}</Trans></div>
</>

Extractor, not executing your code, it only analyzing it during compilation. So all messages should be marked for translation in place where they are defined. Extractor has no idea what is {v} or {answers[i]} when it analyzes <Trans> macro.

both of the questions and answers are strings or ReactNodes.

Normalize them to only react nodes (or if it's possible to only strings):

const FAQs = [
  {
    q: <Trans>question1</Trans>,
    a: <Trans>ans1</Trans>,
  },
  {
    q: <Trans>question2</Trans>,
    a: <>
      <div><Link><Trans>Click me</Trans></Link></div>
      <Trans>...</Trans>
      <div><Link><Trans>Also click me</Trans></Link></div>
    </>,
  },
  {
    q: <Trans>question3</Trans>,
    a: <>
      <div><Link><Trans>Click me</Trans></Link></div>
      <Trans>...</Trans>
      <div><Link><Trans>Also click me</Trans></Link></div>
    </>,
  },
];


return (
  <>{FAQs.map(({ q, a }) =>
      <>
        <div className="question">{q}</div>
        <div className="answer">{a}</div>
      </>
    )}
  </>
);

One more issue is that if I use the Trans or t macro in the array, the macro would remove the line breaks inside , which makes the styling disappear. Originally I don't have to put line break character inside . But after adding Trans macro seems I can only add back '\n' to resolve this styling.

Something like this is possible, and it's intended. you also can use {" "} or {"\n"} in react nodes to explicitly put spaces and linebreakes.