How to append a component to an HTML document in ReactJS

Question

I have a document like

var target = document.getElementById('state')

As we append another div with id="data" like

target.appendChild(document.getElementById('data'))

I want to append a component <Test /> to the target. How can I do that? Thanks in advance.

I would create new element, append it to target and use that element in ReactDOM.render(). — Roman Hocke
– Roman Hocke, Commented Mar 20, 2019 at 10:19

Shadab Ahmed · Accepted Answer · 2019-03-20 10:27:53Z

1

This is not react way of doing things, in react you make components to have states or receive props. In your case to append another div is conditional, so in your react component you can maintain a state and based on that state render the <Test/> component

answered Mar 20, 2019 at 10:27

Shadab Ahmed

57610 silver badges20 bronze badges

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

Comments

Muhammad Abdullah Shafiq · Accepted Answer · 2019-03-20 10:19:02Z

0

I think You have to use a loop to render or create dynamic Elements in html like:

<div>
   {testsData.map(data => {
      return (<Test {...data} />);
   })}
</div>

answered Mar 20, 2019 at 10:19

Muhammad Abdullah Shafiq

8646 silver badges17 bronze badges

Comments

elad BA · Accepted Answer · 2019-03-20 10:21:19Z

0

I suggest doing it in the normal react way.

doing as you wish is exposing your site to attacks.

here is an example how to do it dangerously example

here is why not to do it react official dangerously

answered Mar 20, 2019 at 10:21

elad BA

1,99814 silver badges22 bronze badges

2 Comments

Hareesh Over a year ago

If this is not secured, could you suggest a secured way?

elad BA Over a year ago

Its to long to explain I can only tell you that in react you dont have a reason to use query(getElement...) you can use "ref" attribute in the element to ref it

Collectives™ on Stack Overflow

How to append a component to an HTML document in ReactJS

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related