I'm trying to dynamically set the recipient of my mailto link in javascript. I thought that I could just put a javascript variable in the recipient place of the link, but I get errors when trying to do so. Anyone have any suggestions of why this might not be working?

This is what I currently have, which is throwing errors inside my code.

var customerEmail = "[email protected]";

<a href='mailto:' + customerEmail + '?subject=Quote&body=I%20would%20like%20to%20accept%20this%20quote' ><button>Click To Accept</button></a>

I'm trying to dynamically set the recipient of my mailto link in javascript. I thought that I could just put a javascript variable in the recipient place of the link, but I get errors when trying to do so. Anyone have any suggestions of why this might not be working?

This is what I currently have, which is throwing errors inside my code.

var customerEmail = "[email protected]";

<a href='mailto:' + customerEmail + '?subject=Quote&body=I%20would%20like%20to%20accept%20this%20quote' ><button>Click To Accept</button></a>

• javascript
• html
• reactjs

2 Answers 2

either pull out the concatenation out of the href or use bacticks to fill the href.

<a href={`mailto:${customerEmail}?subject=Quote&body=I%20would%20like%20to%20accept%20this%20quote`} >
   <button>Click To Accept</button>
</a>

You are missing the curly braces inside the href attribute:

var customerEmail = "[email protected]";

<a href={'mailto:' + customerEmail + '?subject=Quote&body=I%20would%20like%20to%20accept%20this%20quote'} >
  <button>Click To Accept</button>
</a>

The curly braces are a special syntax to let the JSX parser know that it needs to interpret the contents in between them as JavaScript instead of a string.