List `<ContzaList />`

Renders a list of elements or components. This is something almost equal to array.map().

Contza components inside <ContzaList /> have their own scope. So for example if you have a <ContzaText>Title</ContzaText> in the same level as the list, you can use the "Title" field name inside the list component.

Props

List component has all default html attributes (id, className, etc) and also a few Contza specific props.

name	Defines the name of the field.
as	Rendered element. Defaults to React Fragment.
children	Rendered list item.

Examples

Here are a few examples how to use List component.

A list of texts

import { ContzaList, ContzaText } from "@contza/react";
 
const Component = () => {
  return (
    <ContzaList name="List of texts">
      <ContzaText>Text</ContzaText>
    </ContzaList>
  );
};
 
export default Component;

Using "as" prop

import { ContzaList, ContzaText } from "@contza/react";
 
const Component = () => {
  return (
    <ContzaList name="List of texts" as="ul">
      <li>
        <ContzaText>Text</ContzaText>
      </li>
    </ContzaList>
  );
};
 
export default Component;

Using item index

import { ContzaList, ContzaText } from "@contza/react";
 
const Component = () => {
  return (
    <ContzaList name="List of texts">
      {(listKey, index) => {
        const isFirst = index === 0;
        return <ContzaText>{isFirst ? "First text" : "Text"}</ContzaText>;
      }}
    </ContzaList>
  );
};
 
export default Component;

Image Rich text