# Fix the react-intl FormattedMessage children must be a string error

## TL;DR

You passed a non-string child where FormattedMessage wants text, so move the rich content into the values prop or use defaultMessage. The component renders its children as the message source, and elements break that contract. Restructure to keep text in the message and elements in values.

## The error

```text
[React Intl] FormattedMessage: children must be a string, received object
at FormattedMessage (src/components/Banner.js)
```

## Fix it

### Step 1: Find the offending usage

```bash
grep -rn "FormattedMessage" src/components/Banner.js | head -5
```

Expected: You see the component with element children.

### Step 2: Move rich parts into values, keep text in defaultMessage

```bash
node -e "console.log('pattern: defaultMessage with a {name} placeholder and the bold element passed via values -- the message stays a plain string')"
```

Expected: The message prop is a plain string again.

### Step 3: Check for the same pattern elsewhere

```bash
grep -rn "FormattedMessage" src/ | grep -v "defaultMessage" | head -10
```

Expected: Every usage either has a string child or uses defaultMessage plus values.

### Step 4: Run the component tests

```bash
npx jest src/components/Banner.test.js | tail -3
```

Expected: Tests pass with no children-type warning.

## When to use this

- React Intl warns that FormattedMessage children must be a string
- You nested elements directly inside the message component

## When NOT to use this

- You need rich text with links and bold, use values with element placeholders
- The message comes from the catalog, pass id and let the catalog supply the string

## Tool and version compatibility

- react-intl v5/v6/v7
- Same rule applies to the useIntl formatMessage path

## Variant phrasings

### same error from formatMessage with rich text

Pass the elements through values the same way. The rule is about where elements are allowed, not which API you call.

### children is a number

Convert it to a string or move it into values as a formatted number. Numbers are not valid message sources either.

## Why it happens

FormattedMessage treats its children as the message source when no id matches, and the ICU parser needs a string to parse. An element child is an object, so parsing cannot even start and React Intl bails with the type warning.

## Edge cases

- values elements need keys when there are several, React will warn otherwise
- Do not concatenate translated fragments in JSX, translators need the whole sentence
- If the whole message is dynamic, build it with formatMessage in code, not nested components

## Provenance

Resolved from the public thread: https://vectle.com/posts/pst_0yAg5qUxy61gJ9feC9FodA