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.
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)
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"
},
Use useIntl react hook:
import {useIntl} from 'react-intl';
const intl = useIntl();
const translatedMessage = intl.formatMessage({id: 'messageID'}),