2

This is my class:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from 'react-intl';

class MyClass extends Component {
  constructor(props) {
    super(props);
  }
  get pageTitle() {
    const { intl } = this.props;
    return intl.formatMessage({id: 'messages_my_class_page_title'});
  }
  render() {
    return (
      <div>
        Dummy content
      </div>
    );
  }
}
MyClass.propTypes = {
  intl: intlShape.isRequired
}

export default injectIntl(MyClass);

My page title appears when I put in a random text and don't use react-intl injectIntl function.

I have 'react-intl' working fine for all other cases. Even for static properties using 'hoist-non-react-statics' library.

I am stumbled upon this one.

Edit 1: I can fix it using

<FormattedMessage id="messages_my_class_page_title"/>

But I want to know how to use injectIntl way.

Gaurav
  • 191
  • 18
  • So, are you getting an error when trying to get the page title using react-intl? And if you do, what's the error message? – Thomas Hennes Jan 05 '18 at 05:39
  • Hi Jaxx, I am not getting any error messages. Its a null return. I cant even console.log the output in getter as injectIntl creates a copy of the component. – Gaurav Jan 05 '18 at 06:07
  • If you remove the getter (i.e just have a `pageTitle()` method with the exact same content) and then invoke that method inside your component with `{this.pageTitle()}`, do you see the formatted title being displayed? – Thomas Hennes Jan 05 '18 at 06:14
  • @Jaxx I am looking to find solution with the getter. Because the value is inherited and child class sets the value. – Gaurav Jan 05 '18 at 09:16
  • try withRef: true ? https://github.com/yahoo/react-intl/issues/1084 – Andrew - oahehc Jul 07 '18 at 11:17

0 Answers0