This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In


    Use a react-intl Higher Order Component to format messages and get current locale

    Damon BauerDamon Bauer

    In some cases, you might need to pass a string from your intl messages.js file as a prop to a component. Instead of using react-intl components (which generate markup), we’ll use the injectIntl higher order component provided by react-intl. This will provide just the string we’re looking for, make the prop simpler, and avoid creating unnecessary DOM elements.

    We’ll also use props passed to the component from the Higher Order Component to clean up some redundant code.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    00:00 Let's add a place where a user can enter a review by adding a text area below the reviews. I'll just add a text area. I would also like to add a placeholder attribute to let the user know what this field is for, but it needs to be rendered in the correct language.

    00:19 I'll add the placeholder to each language in the messages file. I'll give it a key of inputplaceholder, and I'll pass the value. I'll just do this for the other languages, as well. Back in our text area, initially you may think to render the placeholder prop with a formatted message component. Let's take a look, and see what happens if we do that.

    00:46 I'll add a formatted message and I'll give it an ID prop of details.inputplaceholder. Looking in the browser, we can see our text area placeholder renders object object. The reason this happens is because the formatted message component doesn't actually render when it's inside of the HTML placeholder attribute.

    01:11 To fix this, we need to use the React-Intl inject Intl higher-order component. Let's go ahead and import that higher order component from React-Intl. Next, in the props declaration of this book detail component, I'll add an Intl prop, as this will be passed in from the Intl provider parent component.

    01:35 Now, let's go back to our text area, and we'll change that text area placeholder prop. We'll start by referencing the Intl prop and we'll call formatMessage(). That's a method, so we're going to instantiate that.

    01:54 As an argument to this method, I'll pass an object and I'll provide a key of ID and a value of detail.inputplaceholder. Using the Intl formatMessage() method is actually the underlying API that the formatted message component uses, but we bypass the React component creation step and just get the string at detail.inputplaceholder in the messages file.

    02:25 One final thing, we'll also need to wrap the book detail export in an inject Intl higher-order component. We'll add that, and to that method, we'll pass our book detail component. With those changes, our text area now renders the correct string in each language.

    02:46 One other benefit to including the Intl prop in our component declaration here is that we can get the user's locale without doing the navigator lookup in this file, because we're already doing it in the index.js file when we set up our Intl provider component.

    03:05 I'm going to go ahead and delete this locale code here and I'll update where we're searching for locale in this formatted number. We'll just grab locale off of Intl. We'll do the same here. Great. Our app hasn't changed, and we're now reducing code duplication as well.