Interpolate React Link component and pass it as a prop

Question

I am trying to pass a link to a component where in on click it should get redirected to the specific route. But here I could see the Link interpolated as [object Object] .

Can someone help me with that

 <CommonMessage description={`Click here ${<Link to="/signin">here</Link>} to login`} />

The output I get is:

Click [object Object] to login

Answer 1

That is because React components are just objects and when you put them inside a string Javascript execute toString() on them and you get the result you're getting right now.

What I would suggest is you pass description prop as a React component like this:

<CommonMessage 
  description={
    <>
      Click here <Link to="/signin">here</Link> to login
    </>
  }
/>

This gives you a nice API since the user of the component now decides the content to render.