2 replies

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:

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:test@test.me

KP-C

Kevin Powell - Community•3y ago•

2 replies

Å 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:

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:test@test.me

A tag href with props

Similar Threads

A tag href with props

Similar Threads

Similar Threads

Similar Threads