intl.formatMessage not working - react-intl

After trying and failing with dynamic values, I figured out that if const intlKey = "something"

{intl.formatMessage({ id: intlKey })} //this doesn't work
{intl.formatMessage({ id: `${intlKey}` })} //this works

<IntlMessages id={intlKey} /> //this doesn't work
<IntlMessages id={`${intlKey}`} /> //this works

Thus stringify your value (even if sure that it's a string) for intl to work.

You need to call formatMessage with MessageDescriptor, not just id:

const x = intl.formatMessage({id: 'hello'}) + ' ' + intl.formatMessage({id: 'world'});

To better remember this - component is called with prop id:

<FormatMessage id="Hello" />

Props are in fact a key-value dictionary:

// this is the same as above
<FormatMessage {...{id: 'hello'}} />

Now, formatMessage function accepts the same props as FormatMessage component:

formatMessage({id: 'hello'})

Besides, seems like you are missing default value for it.

 <FormattedMessage id="footer.table_no" defaultMessage="Hello" />

Related