Question 397910 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React fragment displays embedded link element as [object Object]

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?

Tags:

2

Answers


  1. 0 
                <>
          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

    Login or Signup to reply.
  2. 0

    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>
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search