React intl return [object Object]

Question

I am trying to use react intl to translate the page of my site. Github

json lang :

fr.json : 
{
    "errorPage.title": Erreur 404"
}

en.json : 
{
    "errorPage.title": Error 404"
}

I have that on my js file

const title = <FormattedMessage id="errorPage.title" defaultMessage="Erreur 404" />

document.title = title;

That return on my title page this [object Object]

How i can do ? Thank's !

Answer 1

Since the key contains . Notation you need to access key like

object["errorPage.title"]

Also the json key value you posted has double quotes missing in the start

You need to do something like below to make it work

const object = {
     "errorPage.title": "Error 404"
}

const title = object["errorPage.title"];
document.title = title;

Answer 2

I know this is an old question, but maybe the answer can help someone.

The FormattedMessage is a React component that provides a declarative way of using localized messages. Therefore, the value of the variable title (from the question) is not a string but an object.

To achieve this, you should imperatively use the react-intl ( official doc ).

const title = intl.formatMessage({ id: "errorPage.title", defaultMessage: "Erreur 404" });

document.title = title;

You can find more examples of the react-intl imperative and declarative way of the usage here .