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.

Show me your current way of extracting the string as I'm not quite understand what you mean. — NearHuscarl, Oct 20 '21 at 11:25
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](//creativecommons.org/licenses/by-sa/4.0/), 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?](//meta.stackexchange.com/q/5221) — Dharman, Dec 02 '21 at 12:36

score 3 · Answer 1 · answered Mar 18 '22 at 08:22

3

Use useIntl react hook:

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

answered Mar 18 '22 at 08:22

Trinh Truong

141
6

score 1 · Answer 2 · answered Oct 20 '21 at 12:18

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)

answered Oct 20 '21 at 12:18

Awais

93
1
10

NearHuscarl · Answer 3 · 2021-11-06T09:34:33.260

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"
    },

Extract String from Formatted Message

3 Answers3

Live Demo (Source Code)