Parsing variable for FormattedMessage ID in react-intl-CodePudding

I have a bunch of error messages that are being set as state variable, like so:

if (err.message === "Invalid code or auth state for the user.") {
    this.setState({
        errorMessage: "sms.error.incorrect",
        goodCode: false,
    });
} else if (
    err.message ===
    "Invalid session for the user, session is expired."
) {
    this.setState({
        errorMessage: "sms.error.expired",
        goodCode: false,
    });
} else {
    this.setState({
        errorMessage: "sms.error.unknown_error",
        goodCode: false,
    });
}

In the render part, I try to pass the errorMessage string as ID to the FormattedMessage, but it will not parse it.

<FormattedMessage id="{this.state.errorMessage}" />

It throws the following error:

Error: [@formatjs/intl Error MISSING_TRANSLATION] Missing message: "{this.state.errorMessage}" for locale "de", using id as fallback.

What am I missing?

CodePudding user response：

You're passing a string "{this.state.errorMessage}" to the id which doesn't exist, what you probably want is to remove the quotes:

<FormattedMessage id={this.state.errorMessage} />