Extract String from Formatted Message

Question

I am trying to extract the string part from FormattedMessage so I can access it and export it using CSV.
Here is my FormattedMessage code (IntlMessages.js):

import React from 'react';
import {FormattedMessage, injectIntl} from 'react-intl';

const InjectMassage = props => <FormattedMessage {...props} />;

export default injectIntl(InjectMassage, {
  withRef: false
});

For displaying data, I use

<IntlMessage id="" />

where IntlMessage is coming from the import statement of the code of FormattedMessage.

import IntlMessage from ./"IntlMessages.js";

I am getting the string on the basis of id that is stored in a json file.

I want to just extract the string from IntlMessage so that I can manipulate and export as CSV as right now it is coming as [object Object]. I am using material Table for displaying of data and it is like:

title: <IntlMessage id="" />

I am new to this react-intl and was not able to make progress so it would help me if someone can guide me in this.

EDIT:
I am using material-table and I want to download csv, but right now I am getting as headers as [object Object] because of IntlMessages only. I want to return a string to title so that when I download, the string appears instead of [object Object].

I have tried <IntlProvider textComponent={React.Fragment}> also but that is also not working.

Answer 1

Use react-intl hook called useIntl Then use its method formatMessge

Eg

Import {useIntl} from 'react-intl'

//Hook
const intl = useIntl()
//Usage
intl.formatMessage(message)

Answer 2

If you're using a class component you can use injectIntl HOC to provide the intl object to the props, then use intl.formatMessage({...}) to get a title in string. The code in your question doesn't work because it uses FormattedMessage which is an react component (object):

const Content = injectIntl(MaterialTableContainer);

And inside the component that returns the MaterialTable:

<MaterialTable
  columns={[
    {
      title: this.props.intl.formatMessage({
        id: "titleId",
        defaultMessage: "Title"
      }),
      field: "name"
    },

Live Demo (Source Code)

Answer 3

Use useIntl react hook:

import {useIntl} from 'react-intl';
const intl = useIntl();
const translatedMessage = intl.formatMessage({id: 'messageID'}),