Dynamic href tag React in JSX

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>

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>

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;
}