Make part of the text as link.(react - localization)

Question

I need to mark part of the text as a link. Something like: "Please log in with your email...". This text must be localized later. I need that "log in" part to be the link.

When I do something like this in the render method:

var link = React.DOM.a({
                    href: this.makeHref('login')
                },
                'log in'
            );// or React.createElement or
//var link = <a href={this.makeHref('login')}>
//   'log in'</a>;
<div>{'Please '+ link + ' with your email...'}</div>

It will output:

Please `[object Object]` with your email...

Without surround text, I receive the expected result. In other words: How to make react render HTML not object.

This is a simplified example - I need to insert link text with format marker {0} like in C# - or any other working solution.

Thank you for help!

Answer 1

If you want to use an element within another element, just use curly braces like so:

var Component = React.createClass({
  render: function() {
    var link = <a href={this.makeHref('login')}>log in</a>;

    return <div>Please {link} with your email.</div>;
  }
};

You can see a working fiddle here: https://jsfiddle.net/jrunning/fencjn4x/

If you're going to be internationalizing your app at some point in the future I recommend a) crossing that bridge when you come to it, and b) using a solution like React Intl instead of trying to build your own solution with string concatenation.