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

[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.