How to make a list of parent BuilderBlocks that contains 2 text BuilderBlocks

Technical Questions
,
1

I’m trying to make a Q&A component that generates defaults via the list so that the structure remains the same and each can be styled but the logic transitions can
be handled.

So I want to make a list of parent BuilderBlocks containing 2 text BuilderBlocks children.

I Want it to do this basically when I add the component
image
image

Code stack
NextJS, tsx, theme-ui

Reproducible code example

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from 'theme-ui'
import { BuilderBlocks } from '@builder.io/react'

const QnA = (props: any) => {

return  (
<div
  sx={{
    background: 'red',
     padding: '20px',
  }}
 >
 {props.questions.map((qna: any, a: number) => {
   return (
     <div key={a}>
                  <BuilderBlocks
                    parentElementId={props.builderBlock.id}
                    dataPath={`component.options.questions.${a}.qaContainer`}
                    blocks={props.questions[a].qaContainer}
                  />

                  <BuilderBlocks
                    child
                    parentElementId={props.builderBlock.id}
                    dataPath={`component.options.questions.${a}.qaContainer.question`}
                    blocks={props.questions[a].qaContainer.question}
                  />

                  <BuilderBlocks
                    child
                    parentElementId={props.builderBlock.id}
                    dataPath={`component.options.questions.${a}.qaContainer.answer`}
                    blocks={props.questions[a].qaContainer.answer}
                  />
                </div>
              )
        })}
</div>
   )
}

export default QnA

Builder.Register

import { Builder, withChildren } from '@builder.io/react'
import dynamic from 'next/dynamic'

const QnA = withChildren(dynamic(() => import('@components/custom/QnA')))

Builder.registerComponent(QnA, {
  name: 'QnA',
  canHaveChildren: true,
  inputs: [
    {
      name: 'questions',
      type: 'list',
      subFields: [
        {
          name: 'qaContainer',
          type: 'uiBlocks',
          defaultValue: [
            {
              '@type': '@builder.io/sdk:Element',
              responsiveStyles: {
                large: {
                  width: '100%',
                  maxHeight: '200px',
                  padding: '20px',
                  margin: '10px',
                },
              },
            },
          ],
        },
        {
          name: 'question',
          type: 'uiBlocks',
          defaultValue: [
            {
              '@type': '@builder.io/sdk:Element',
              component: {
                name: 'Text',
                options: {
                  text: 'some question',
                },
              },
              responsiveStyles: {
                large: {
                  textAlign: 'left',
                  textDecoration: 'none',
                  color: '#000',
                  fontSize: '25px',
                  fontFamily: '"Lexend-Regular", san-serif',
                  lineHeight: 'normal',
                },
              },
            },
          ],
        },
        {
          name: 'answer',
          type: 'uiBlocks',
          defaultValue: [
            {
              '@type': '@builder.io/sdk:Element',
              component: {
                name: 'Text',
                options: {
                  text: 'some answer',
                },
              },
              responsiveStyles: {
                large: {
                  textAlign: 'left',
                  textDecoration: 'none',
                  color: '#000',
                  fontSize: '16px',
                  fontFamily: 'Lexend-Light, san-serif',
                  lineHeight: 'normal',
                },
              },
            },
          ],
        },
      ],
      defaultValue: [
        {
          qaContainer: [
            {
              question: [
                {
                  '@type': '@builder.io/sdk:Element',
                  component: {
                    name: 'Text',
                    options: {
                      text: 'Some Question',
                    },
                  },
                  responsiveStyles: {
                    large: {
                      textAlign: 'left',
                      textDecoration: 'none',
                      color: '#000',
                      fontSize: '25px',
                      fontFamily: '"Lexend-Regular", san-serif',
                      lineHeight: 'normal',
                    },
                  },
                },
              ],
              answer: [
                {
                  '@type': '@builder.io/sdk:Element',
                  component: {
                    name: 'Text',
                    options: {
                      text: 'Some Answer',
                    },
                  },
                  responsiveStyles: {
                    large: {
                      textAlign: 'left',
                      textDecoration: 'none',
                      color: '#000',
                      fontSize: '16px',
                      fontFamily: '"Lexend-Light", san-serif',
                      lineHeight: 'normal',
                    },
                  },
                },
              ],
              '@type': '@builder.io/sdk:Element',
              responsiveStyles: {
                large: {
                  width: '100%',
                  maxHeight: '200px',
                  padding: '20px',
                  margin: '10px',
                },
              },
            },
          ],
        },
      ],
    },
  ],
})