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 ing 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 ing 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.

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 ing 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 ing 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.

• javascript
• reactjs
• material-ui
• material-table
• react-intl

• Show me your current way of extracting the string as I'm not quite understand what you mean. – NearHuscarl Commented Oct 20, 2021 at 11:25
• 2 Please don't make more work for other people by vandalizing your posts. By posting on the Stack Exchange network, you've granted a non-revocable right, under the CC BY-SA 4.0 license, for Stack Exchange to distribute that content (i.e. regardless of your future choices). By Stack Exchange policy, the non-vandalized version of the post is the one which is distributed. Thus, any vandalism will be reverted. If you want to know more about deleting a post please see: How does deleting work? – Dharman ♦ Commented Dec 2, 2021 at 12:36

3 Answers 3

Use useIntl react hook:

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

If you're using a class ponent 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 ponent (object):

const Content = injectIntl(MaterialTableContainer);

And inside the ponent that returns the MaterialTable:

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

Live Demo (Source Code)

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)