0

i've searched more than 2 days for a solution, but didn't find any.

I'm trying to use react-intl inside of a select-Tag and I know, that i can't use <FormattedMessage />. I have to use formattedMessage.

Here is the code:

contact.jsx

import React, { Component } from 'react';
import { Button, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import { Grid, Jumbotron } from 'react-bootstrap';
import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
import { defineMessages, injectIntl, intlShape } from 'react-intl';

const messages = defineMessages({
    common: { id: "app.contact.subject.common"}
});

export default class Contact extends Component
{
    render() {
        const { intl } = this.context;

        return (
            <Grid>
                <Jumbotron>
                    <h1><FormattedMessage id='app.contact.title' /></h1>
                    <form>
                        <FormGroup controlId="formCpntrolsSelect" >
                            <ControlLabel><FormattedHTMLMessage id="app.contact.subject.title" /></ControlLabel>
                            <FormControl
                                componentClass="select"
                                required
                            >
                                <option value="common">{intl.formatMessage(messages.common)}</option>
                                <option value="privacyPolicy">Datenschutz</option>
                                <option value="user">Benutzer</option>
                                <option value="affiliate">Affiliate</option>
                                <option value="webapp">Website</option>
                                <option value="android">Android-App</option>
                                <option value="ios">iPhone-App</option>
                                <option value="misc">sonstiges</option>
                            </FormControl>
                        </FormGroup>
                       // more code
                    </form>
                </Jumbotron>
            </Grid>
        )
    }
}

// export default injectIntl(Contact);

As you can see, I've imported the required intl-Components from react-intl. This solution is the last one, i've tried and all ended with the same result.

I've even tried to import the component in App.jsx with `import { Contact } from 'contact'.

Every solution ended with the same error: TypeError: Cannot read property 'formatMessage' of undefined in detail:

contact.jsx:28 Uncaught TypeError: Cannot read property 'formatMessage' of undefined
    at Contact.render (contact.jsx:28)
    at finishClassComponent (react-dom.development.js:14105)
    at updateClassComponent (react-dom.development.js:14069)
    at beginWork (react-dom.development.js:14687)
    at performUnitOfWork (react-dom.development.js:17242)
    at workLoop (react-dom.development.js:17281)
    at HTMLUnknownElement.callCallback (react-dom.development.js:144)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:193)
    at invokeGuardedCallback (react-dom.development.js:243)
    at replayUnitOfWork (react-dom.development.js:16536)
    at renderRoot (react-dom.development.js:17374)
    at performWorkOnRoot (react-dom.development.js:18252)
    at performWork (react-dom.development.js:18159)
    at performSyncWork (react-dom.development.js:18132)
    at requestWork (react-dom.development.js:18009)
    at scheduleWork (react-dom.development.js:17802)
    at scheduleRootUpdate (react-dom.development.js:18523)
    at updateContainerAtExpirationTime (react-dom.development.js:18549)
    at updateContainer (react-dom.development.js:18580)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:18862)
    at react-dom.development.js:19016
    at unbatchedUpdates (react-dom.development.js:18397)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:19012)
    at Object.render (react-dom.development.js:19076)
    at Module../src/index.js (index.js:25)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object.0 (serviceWorker.js:127)
    at __webpack_require__ (bootstrap:782)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

I hope, you can help me to solve this trouble. It's the option value=common line

Thanks in advance for every good solution.

If any more information are required, I will update the post.

SacrumDeus
  • 156
  • 1
  • 13

1 Answers1

1

injectIntl injects a prop called intl. It is accessible via

this.props.intl

but you are getting intl from this.context

const { intl } = this.context;

change this line to

const { intl } = this.props

and it should work.

You also need to uncomment this line

export default injectIntl(Component)

and remove the export from the class declaration.

Stefan
  • 675
  • 3
  • 9