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
Jochem16mo 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 G16mo ago
Yes sir! 👏
I forgot about the outer curly braces ... 🥺 Thanx!
Want results from more Discord servers?
Add your server