Why do we need to duplicate the translation text in the React component?

[MurzNN]

Here is an example from the React Tutorial: https://github.com/projectfluent/fluent.js/wiki/React-Tutorial

        <Localized id="hello-world">
            <p>Hello, World!</p>
        </Localized>

So, we have the translation id "hello-world", and, together with this, <p>Hello, World!</p>. Could you please explain why do we need to store the "Hello, World!" phrase twice?

1. In the component HTML content, as <p>Hello, World!</p>

2. In the translation list, like this

const MESSAGES_ALL = {
    'en-US': 'hello-world = Hello, World!',
};

And, if ten React components reuse this message, we will have 11 copies of the message in the code, so changing the actual text to something like "Hi World" will lead to many changes in different files.

So, could you please explain the core idea of this duplication and potential benefits?

[eemeli]

The message directly in the JS file is there as a fallback, if loading the localization data fails or if the message is not available in the target locale.

If you're finding that you're re-using the same message multiple times, wrapping it in a custom component and re-using that component would probably be better.