How do you pass a parameter to defineMessages in react-intl?

Question

I have an error message like the one below:

Could not retrieve data: ${e}

How do I convert this to a definedMessage that can accept this error parameter?

A standard definedMessage:

    const messages = defineMessages({
     dataError: {
         id: 'data.error',
         defaultMessage: 'Could not retrieve data: [default message]'
     }
   })

Thanks!

Answer 1

If I understood you correctly like this:

const messages = defineMessages({
  dataError: {
    id: 'data.error',
    defaultMessage: 'Could not retrieve data: {message}'
  }
})

<FormattedMessage
  {...messages.dataError}
  values={{message: `Could not retrieve data: ${e}`}}
/>

Answer 2

need to replace [default message] with {e} in defineMessages

const messages = defineMessages({
  dataError: {
    id: 'data.error',
    defaultMessage: 'Could not retrieve data: {e}'
  }
})

Define Message variable

 const message = "Error Message";

Pass message variable in Formatted Message

 <FormattedMessage
          {...messages.dataError}
          values={{ e: `${message}` }}
 />

Out Put in below

<span>Could not retrieve data: Error Message</span>

Hope it will help you.

Answer 3

This can be done more simple. e.g. Where 'launcher.question' could be something like

'launcher.question': 'Dear {e} tell us about' <--- this is in your IntlProvider message definitions.

<FormattedMessage id='launcher.question' values={{ e: this.state.clientName}} />