React Component is not rendering and returns [object Object]

Question

I have to prepare one static HTML and inside it, I have to render a react Link. But it is not working as expected and returns [object Object]. Here is my code.

 const htmlCode =    `<div class='info-container'>
                          <div class='heading-section'>
                              ${<><Link to = {targetURL}>Click Here</Link></>}
                          </div>
                      <div>`

Output I am getting after rendering:

I have consoled that and getting output on console as shown below :

------------------------------------EDIT------------------------------------

The main goal here is, I want to pass this static HTML (variable htmlCode) to another component and that is not rendering but I get object instead of rendered as shown in console output attached here. Is there any way I can render that and convert it to a kind of static HTML before passing to other component?

score 2 · Answer 1 · edited Jan 25 '22 at 07:36

2

JSX is not HTML, it is a syntactic sugar for HTML. You cannot wrap it around strings. It will transpile to React.createElement which returns a JavaScript object.

const htmlCode = <div class='info-container'>
                     <div class='heading-section'>
                         <Link to = {targetURL}>Click Here</Link>
                      </div>
                  <div>

See more of Rendering JSX elements

edited Jan 25 '22 at 07:36

FZs

16,581
13
41
50

answered Jan 25 '22 at 05:54

Shan

1,468
2
12

Tried this solution, [object Object] was removed and get the correct string there but Link is not rendered yet as expected, see the rendered Link component here [link](https://prnt.sc/26ixw7w) – krupal_m Jan 25 '22 at 06:01
`Link`, Is it from react-router-dom? – Shan Jan 25 '22 at 06:06
Yes, It is from react-router-dom – krupal_m Jan 25 '22 at 06:06
1

the screenshot looks like you've used `link` instead of `Link`, `Link` from router will render a `` tag – Shan Jan 25 '22 at 06:13
you can also replace `Link` with `Click Here` – Shan Jan 25 '22 at 06:16
that will result in the page reloading :( – krupal_m Jan 25 '22 at 07:10
I have edited the question, maybe you can have a more clear idea about what I want to achieve – krupal_m Jan 25 '22 at 07:17
check if this is helpful , https://stackoverflow.com/questions/30715220/dynamic-html-string-to-react-component?rq=1 – Shan Jan 25 '22 at 07:32

React Component is not rendering and returns [object Object]

1 Answers1