`List`

The List control provides your component with an array where the values are controlled by a Makeswift control.

The List control can be nested as deeply as you want within List and Shape controls.

AnchorExamples

AnchorPopulating a list of testimonials

In this example we register a hypothetical Testimonials component which takes a testimonials prop. This prop expects an array of testimonial objects. We use the List control, together with Shape, TextInput, and TextArea controls to control the testimonials prop.

import { ReactRuntime } from '@makeswift/runtime/react'
import { List, Shape, TextInput, TextArea } from '@makeswift/runtime/controls'
import { Testimonials } from '~/components'

ReactRuntime.registerComponent(Testimonials, {
  type: 'testimonials',
  label: 'Testimonials',
  props: {
    testimonials: List({
      label: 'Testimonials',
      type: Shape({
        type: {
          author: TextInput({ label: 'Author', defaultValue: '' }),
          quote: TextArea({ label: 'Quote', defaultValue: '' }),
        },
      }),
      getItemLabel(testimonial) {
        return testimonial?.author || 'Untitled'
      },
    }),
  },
})

AnchorAPI

AnchorParameters

Parameter	Type	Required	Default	Description
`type`	`ControlDefinition`	yes	N/A	A control that determines the values in the array.
`label`	`string`	no	`'List'`	Text for the panel label.
`getItemLabel`	`(item: T) => string`	no	`undefined`	A function to get the label for each list item shown in the panel.

Valid control values for the type parameter are the following:

AnchorProvided value

The List control provides an array value to your components where the items in the array are of the type provided by the control used in the type field. Each item's value will be determined by the associated control.