I’m having an issue getting a React fragment to display properly. I have some text with an embedded link element, but it displays the link element as [object Object] like this:
You must first verify your email address before logging in. Would you like to [object Object] the email confirmation link?
Here is the abbreviated relevant code:
export default function MyComponent() {
let loginError: JSX.Element = <>{`You must first verify your email address before logging in. Would you like to ${<Link to="../account/resend-email-confirmation" className="alert-link">resend</Link>} the email confirmation link?`}</>;
return (
<div>
{loginError}
</div>
)
}
How can I get the link to display properly?
the reason it’s not working is because you are trying to embed a React component inside a template string and then JS is converting that component to a string within the template string.
In your case, I don’t think you even need to use a template string. something like this should be enough?
import React from 'react';
export default function App() {
const loginError = (<>text <Link>link text</Link>text</>);
return (
<span>
{loginError}
</span>
);
}
const Link = ({ children }) => (
<span>
{children}
</span>
);
<>
You must first verify your email address before logging in. Would
you like to
<Link
to="../account/resend-email-confirmation"
className="alert-link"
>
resend
</Link>
the email confirmation link?`
</>
Try this instead
4