Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamic href tag React in JSX

// This Javascript <a> tag generates correctly React.createElement('a', {href:"mailto:"+this.props.email}, this.props.email) 

However, I'm struggling to recreate it in JSX

<a href="mailto: {this.props.email}">{this.props.email}</a>  // => <a href="mailto: {this.props.email}"></a> 

The href tag thinks the {this.props.email} is a string instead of dynamically inputting the value of {this.props.email}. Any ideas on where I went amiss?

like image 640
thedanotto Avatar asked Jan 14 '16 00:01

thedanotto


2 Answers

It is returning a string because you are assigning it to a string.

You'll want to set it to a dynamic property, that includes a the string at the beginning of it

<a href={"mailto:" + this.props.email}>email</a>

like image 178
Patrick Avatar answered Sep 22 '22 16:09

Patrick


A slightly more ES6 way to do what Patrick is suggesting would be to use a template literal:

<a href={`mailto:${this.props.email}`}>email</a>

like image 25
Sean Clancy Avatar answered Sep 22 '22 16:09

Sean Clancy