intl.formatMessage not working - react-intl : <p>I am trying to do language translation using <code>react-intl</code>. When I use this <code>&lt;FormattedMessage id='importantNews' /&gt;</code>, it is working perfect. But when I use the following code with <code>intl.formatMessage()</code>, it is not working and throwing some errors. I don't know what is wrong in it.</p>

<pre><code>import { injectIntl, FormattedMessage } from 'react-intl';

function HelloWorld(props) {
  const { intl } = props;
  const x = intl.formatMessage('hello') + ' ' + intl.formatMessage('world'); //not working
  const y = &lt;FormattedMessage id='hello' /&gt;; //working
  return (
    &lt;button&gt;{x}&lt;/button&gt;
  );
}

export default injectIntl(HelloWorld);
</code></pre>

<p>My root component is like this,</p>

<pre><code>import ReactDOM from 'react-dom';
import { addLocaleData, IntlProvider } from 'react-intl';
import enLocaleData from 'react-intl/locale-data/en';
import taLocaleData from 'react-intl/locale-data/ta';

import HelloWorld from './hello-world';

addLocaleData([
  ...enLocaleData,
  ...taLocaleData
]);

const messages = {
  en: {
    hello: 'Hello',
    world: 'World'
  },
  ta: {
    hello: 'வணக்கம்',
    world: 'உலகம்'
  }
};

ReactDOM.render(
  &lt;IntlProvider key={'en'} locale={'en'} messages={messages['en']}&gt;
    &lt;HelloWorld /&gt;
  &lt;/IntlProvider&gt;,
  document.getElementById('root')
);
</code></pre>

<p>Can someone help me to solve this issue? Thanks in advance.</p>
