Dynamic Addition to html element

Question

I want to dynamically add few div elements just when component is mounted. I tried with following code

<div className="resumebuilder__structure" ref="panel_holder">
</div>

My function which is called in lifecycle hook

getPanels = () => {
  return this.props
    .resumeTemplate
    .roughTemplateStructure
    .roughScale.map((roughS) => {
      const uid = uuid();
      this.updatePanelInTemplate(uid);
      const elem = <div ref={uid} className={roughS.class} ></div>;
      return elem;
    });
}

lifecycle method

componentDidMount() {
  this.refs.panel_holder.appendChild(this.getPanels());
}

But I am getting following error

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Does anyone has any idea?

---- Update--

Although I continued with other methods but the answer is still not found. Please do comment if you know anything.

Reda Meskali · Accepted Answer · 2018-07-29 18:48:49Z

0

A better approach would be to put the components in an array in the parent's state. Then render all the components in that array.

answered Jul 29, 2018 at 18:48

Reda Meskali

2753 silver badges9 bronze badges

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

8 Comments

Ladoo Over a year ago

I want to access those div every now and then how do I access it then?

Reda Meskali Over a year ago

what do you mean by access ?

Ladoo Over a year ago

I will dynamically add some more div but on user click

Reda Meskali Over a year ago

yes you will add your components to the array and it will rerender using setState().

Ladoo Over a year ago

used case is like: In the beginning I will add some partition in the div which I am trying now and then after when user drag some component over these divs those components will get added as child to particular div element

|

Collectives™ on Stack Overflow

Dynamic Addition to html element

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