Messages with links using react-intl

index.js

import React from 'react'
import { FormattedMessage } from 'react-intl'

import messages from './messages'

// it can be a component or a variable
const Link = () => (
  <a nohref rel="noopener noreferrer">
    <FormattedMessage {...messages.reminderLink} />
  </a>
)

const Component = () => {
  // it can be a component or a variable
  const link = <a nohref><FormattedMessage {...messages.reminderLink} /></a>

  return (
    <div>
      <FormattedMessage {...messages.reminderHouseAccessItems} values={{ link }} />
      {/* OR */}
      <FormattedMessage {...messages.reminderHouseAccessItems} values={{ link: <Link /> }} />
    </div>
  )
}

export default Component

messages.js

import { defineMessages } from 'react-intl'

export default defineMessages({
  reminderHouseAccessItems: {
    id: 'app.containers.ConfirmInspection.reminderHouseAccessItems',
    defaultMessage: 'Lembre-se de deixar as chaves e a {link} para o vistoriador',
  },
  reminderLink: {
    id: 'app.containers.ConfirmInspection.reminderLink',
    defaultMessage: 'autorização de entrada',
  },
})