props.intl.formatMessage values not found

[gabimoncha]

en.json: {'home.title': 'xxxx {br} xxxx',}

component:

import React from 'react';
import { injectIntl } from 'gatsby-plugin-intl';

const Home = ({ intl }) => {
  return (
    <div>{intl.formatMessage({ id: 'home_title' }, { br: <br /> })}</div>
  );
};

export default injectIntl(Home);

Expected behavior:

xxxx
xxxx

Current behavior: xxxx [object Object] xxxx

[React Intl] Error formatting message: "home.title" for locale: "en" Error: The intl string context variable 'br' was not provided to the string 'xxxx {br} xxxx'

[flocbit]

You need to use either FormattedMessage or defineMessages like so:

const messages = defineMessages({
   homeTitle: {
      defaultMessage: 'xxxx',
      id: 'xxxx'
   }
})

const Home = ({ intl }) => {
  return (
    <div>{intl.formatMessage(messages.homeTitle)}</div>
  );
};

[gabimoncha]

@flocbit and how will this work for the translation? Do I have to define a message for every language?