Reputation: 7327
// 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?
Upvotes: 35
Views: 60816
Reputation: 31
I think this may be very easy...try it
<a href={`mailto:${email}?subject=${subject}&body=${text}`}>{email}</a>
Upvotes: 0
Reputation: 3286
A nicer way to do this in my opinion will be to split it into a function and a JSX attr, something like that:
<Button
onClick=sendMail
>
Send mail
</Button>
const sendMail = () => {
const mailto: string =
"mailto:[email protected]?subject=Test subject&body=Body content";
window.location.href = mailto;
}
Upvotes: 4
Reputation: 661
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>
Upvotes: 45
Reputation: 13984
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>
Upvotes: 64