Issue #2513Opened January 17, 2020by msantore1 reactions

[Question] - Appending to nested components

Question

I'm using component.find() to search for a nested component in a big chunk of HTML content for a fieldset tag so that I can append components after it. Component.find locates the component, as seen in the console.log, but attempting to .append or use .components to inject content results in a console error: fieldSet.append is not a function.

The goal is to use Traits to inject a chunk of HTML using the variable questionFieldSet into the form after the first fieldset.

If I use editor.getSelected().append, the HTML injects but at the wrong position as expected. I need to inject deeply within the nested component and .find() or .closest() doesn't seem to work.

Which API should be used to appened to nested components? Is this the proper structure for a component with big chunks of HTML?

https://codesandbox.io/s/weathered-shape-xubqn

To reproduce:

  1. Drag an Application Form block onto the canvas.
  2. Select the application form on the canvas, and click the cog icon to load the traits
  3. Click "Add Question" in the traits manager.

Thank you

Answers (1)

msantoreJanuary 18, 20201 reactions

Figured this out! Just had to specific an array position :-)

After using component.find('fieldset') be sure to set an array position fieldSet[0].append(questionFieldSet);

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.