Checking if a message is empty with React Intl and Typescript

Question

I have an app which uses React Intl and TypeScript.

I want to display a box with some info text, and I want it to be shown only if the text actually exists.

But I cannot do

<FormattedMessage id="my.id" />

because if my.id doesn't have a value, React Intl will fallback to the message id, i.e., my.id.

So what I tried to do was

const myId: string = 'myId';
const info: string = <FormattedMessage id={myId} />;
const infoExists: boolean = myId === info;

However, info is JSX.Element, not string.

Is there any way to do something like this?

score 2 · Answer 1 · answered Mar 15 '21 at 15:01

2

For JS

const stringExists = !!this.props.intl.messages[id];

as answered here

answered Mar 15 '21 at 15:01

Daya

121
1
6

score 1 · Accepted Answer · answered Jul 20 '17 at 12:13

I figured it out.

const id: string = 'id';
const componentToBeRenderedIfIdHasValue = ...;

<FormattedMessage id={id}>
    {
        (message: string) =>
            message === id
            ? null
            : componentToBeRenderedIfIdHasValue
    }
</FormattedMessage>

I hope this can be of help to someone.

Checking if a message is empty with React Intl and Typescript

2 Answers2