FormattedMessage render props do not renders component variables

[darkowic]

Hello everyone :)

BUG REPORT

Components variables passed to FormattedMessage used as render props are not rendered.

Current behavior

    <FormattedMessage
      id="welcome"
      defaultMessage={`Formatted message variable as a render props: {variable} You should see this text`}
      values={{ variable: <TextValueComponent /> }}
    >
      {text => text}
    </FormattedMessage>

Text will be cut off at variable : Formatted message variable as a render props:

Expected behavior

Render it correctly

Step to reproduce for BUG REPORT

Here is a reproduction case https://codesandbox.io/s/yp8zjow4kx

Your Environment

Executable	Version
npm ls react-intl	2.4.0
npm ls react	16.3.2
npm --version	5.6
node --version	~8

[ghostd]

Hi,

This is a duplicate of #513

[epegzz]

Having the same issue. Text cuts off at the place where the React component variable would've been rendered. No error messages in console.

This works:

<FormattedMessage
    id="welcome"
    defaultMessage={`Formatted message variable as a render props: {variable} You should see this text`}
    values={{ variable: <TextValueComponent /> }}
/>

This does not:

<FormattedMessage
    id="welcome"
    defaultMessage={`Formatted message variable as a render props: {variable} You should see this text`}
    values={{ variable: <TextValueComponent /> }}
>
    {text => text}
</FormattedMessage>

[capndesign]

+1

Experimenting a bit, it looks like swapping this line for return createElement(Fragment, null, ...nodes) (after importing Fragment) fixes it. I assume there is a more elegant solution, but maybe someone will want something brute force-y.

[edreyyo]

react-intl seems to be the de facto standard when it comes to React internationalization. Is it still being actively maintained, @ericf?

[papasmile]

Hi, @edreyyo, please see: #1141 (comment)

[edreyyo]

Thanks for the link @papasmile. Much appreciated.

[capndesign]

I think I figured out why the test passes but the bug is valid! The documentation says to use the formatter as @darkowic described in his original post, but the test does it differently.

In that case, the argument is a destructured array of nodes. When I switch to that technique, I was able to find a workable solution.

It seems like the right solution is to update the documentation.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

Issue was closed because of inactivity. If you think this is still a valid issue, please file a new issue with additional information.