KPC
Kevin Powell - Community•3y ago
Å Marlon G

A tag href with props

Hi! I wanna insert a prop into the mailto href in an a tag, but I'm not understanding how to split the mailto:from the prop content. Child component: 
type EmailAddress = {
  content: string;
};

export const EmailAddress = (props: EmailAddress) => {
  return (
    <>
      //This is where I have the issue ...
      <a href="mailto:"{props.content}>{props.content}</a>
    </>
  );
};
type EmailAddress = {
  content: string;
};

export const EmailAddress = (props: EmailAddress) => {
  return (
    <>
      //This is where I have the issue ...
      <a href="mailto:"{props.content}>{props.content}</a>
    </>
  );
};
Parent component: 
export const Test = () => {
  return (
    <>
      // This is the content I want to be inserted
      <EmailAddress content="test@test.me" />
    </>
  );
};
export const Test = () => {
  return (
    <>
      // This is the content I want to be inserted
      <EmailAddress content="test@test.me" />
    </>
  );
};
The final link should, when hovered, give the value mailto:test@test.me
2 Replies
Jochem
Jochem•3y ago
don't know about react specifically, but in other frameworks the bits in the curly brackets {} is interpreted as JS, so these might work 
<a href={"mailto:"+props.content}>{props.content}</a>
//or
<a href={`mailto:${props.content}`}>{props.content}</a>
<a href={"mailto:"+props.content}>{props.content}</a>
//or
<a href={`mailto:${props.content}`}>{props.content}</a>
Å Marlon G
Å Marlon GOP•3y ago
Yes sir! 👏
I forgot about the outer curly braces ... 🥺 Thanx!

Did you find this page helpful?