Pass JSX within object to react child component?

Question

I am trying to pass content to a component that includes link tags, but am getting [object Object] instead of the link I am expecting. Is there a way to do this?

parent component

const data = {
    title: city,
    content: `click the link ${<a href="/example">here</a>} to continue`
}
return (
    <RandomComponent data={data}
)}

child component

return (
    <div>
        <p>{data.content}</P>
    </div>

currently it is returning

click the link [object Object] to continue

Answer 1

Make the content a JSX element instead.

const data = {
    title: city,
    content: <>click the link <a href="/example">here</a> to continue</>
}

and then

<p>{data.content}</p>

will insert it as desired.