Confusion between types and documentation for FormattedMessage Function as the child

[ilyagru]

Which package?

Since this is a monorepo. Please specify which package this bug report is for.

react-intl 5.20.8

Describe the bug

A clear and concise description of what the bug is.

There is confusion between

• TypeScript types and

• documentation for the FormattedMessage render function.
  https://formatjs.io/docs/react-intl/components/#function-as-the-child

It seems it should be

children?(nodes: React.ReactNodeArray): React.ReactElement | null;

because otherwise if using it like so

<FormattedMessage
  id="..."
  defaultMessage="..."
  values={{...}}
>
  {(...chunks) => {
    return chunks.map(chunk) => React.cloneElement(chunk, { key: index });
  }}
</FormattedMessage>

might produce an error Element type is invalid: expected a string ... but got undefined.

To Reproduce

Codesandbox URL

Please include a codesandbox URL if possible

Reproducible Steps/Repo

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Add any other context about the problem here.

[longlho]

thanks for reporting, latest version should have the fix for this :)

[ilyagru]

@longlho Awesome, thanks! What is the version which includes the fix?

[longlho]

react-intl@5.20.9