Search code examples
javascriptreactjsreact-intl

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


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!


Solution

  • 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}`}}
    />