Using abstract component to iterate sub-component – how to correctly bind state?

I have this idea for a generic component that would allow adding, deleting and copying entries in the form – abstract component handles adding, cloning, etc, while your main component holds actual form – input fields, checkboxes, etc.

Unfortunately I cannot think of how to bind the state. Demo below of what I’ve got so far:


<aura:component abstract="true">
  <aura:attribute name="items" type="object[]" default="[{'name':'foo'},{'name':'baz'}]"/>
  <div class="slds-page-header">
    <aura:iteration items="{!v.items}" var="i">
      <lightning:input type="checkbox" label="delete" name="del" variant="label-hidden"/>
    <div class="slds-button-group" role="group">
      <lightning:button onclick="{!c.add}" label="Add" variant="brand"/>
      <lightning:button onclick="{!c.delete}" label="Delete" variant="destructive"/>
      <lightning:button onclick="{!c.fill}" label="Fill Down" variant="neutral"/>

n.b. items default values and iteration is for demo purposes, but I imagine that’s how it should work approximately.


<aura:component extends="c:AbstractSelector">
  <aura:attribute name="state" type="object"/>
    label="Company name"
  <lightning:input label="Your name" name="name" value="{!}"/>


<aura:component extends="c:AbstractSelector">
  <aura:attribute name="state" type="object"/>
  <lightning:input label="Some question" name="name" value="{!v.state.q1}"/>

The intended use:

<c:QuestionnaireA state="{!v.state.questionnaireA}" />
<c:QuestionnaireB state="{!v.state.questionnaireB}" />

The main motivation is not to create a wrapper for each questionnaire piece, but have one generic one that can be reused. I hope this question is not too abstract for here 🙂


Source : Link , Question Author : dzh , Answer Author : Community

Leave a Comment