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?

FZs · Accepted Answer · 2022-01-25 07:36:07Z

4

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, 2022 at 7:36

FZs

18.8k13 gold badges47 silver badges56 bronze badges

answered Jan 25, 2022 at 5:54

Shan

1,5684 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

krupal_m Over a year ago

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

Shan Over a year ago

Link, Is it from react-router-dom?

krupal_m Over a year ago

Yes, It is from react-router-dom

Shan Over a year ago

the screenshot looks like you've used link instead of Link, Link from router will render a <a> tag

Shan Over a year ago

you can also replace Link with <a href={targetURL}>Click Here</a>

|

Collectives™ on Stack Overflow

React Component is not rendering and returns [object Object]

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related