Kevin Powell - Community•2y ago

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="[email protected]" />
    </>
  );
};

export const Test = () => {
  return (
    <>
      // This is the content I want to be inserted
      <EmailAddress content="[email protected]" />
    </>
  );
};

The final link should, when hovered, give the value mailto:[email protected]

2 Replies

Jochem•2y 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 GOP•2y ago

Yes sir! 👏
I forgot about the outer curly braces ... 🥺 Thanx!

Gaming

Programming

A tag href with props