# Learn about our list renderer

Learn more about enabling custom list rendering in your app.

Like default Hygraph fields, UI extensions can be configured to store multiple values.

To enable custom list rendering in your app, add `FieldExtensionFeature.ListRenderer` to the `features` array in the extension declaration.

```js
import {
  FieldExtensionType,
  FieldExtensionFeature,
} from '@graphcms/uix-react-sdk';

const declaration = {
  extensionType: 'field',
  fieldType: FieldExtensionType.JSON,
  name: 'My custom JSON',
  features: [
    FieldExtensionFeature.FieldRenderer,
    FieldExtensionFeature.ListRenderer,
  ],
};
```

**Note:**

UI extensions declaration must be [re-loaded](https://hygraph.com/classic-docs/ui-extensions/getting-started/extension-declaration#applying-declaration-changes) every time the declaration changes.

Your extension will now need to be able to handle an array of values. A simple example of adding a new value would be to spread the array that you get back from the API and add your new value to it.

To check whether the current extension instance is a multiple-value field, use the `field.isList` boolean:

  **Native JS**

```js
init({
  declaration,
}).then((initialState) => {
  const { status, props } = initialState;
  if (status === 'ok') {
    const {
      value,
      onChange,
      field: { isList },
    } = props;
    const insertHandler = (newValue) => {
      if (isList) {
        onChange([...value, newValue]);
      } else {
        onChange(newValue);
      }
    };
  }
});
```


**React**

```js
const {
  value,
  onChange,
  field: { isList },
} = useFieldExtension();

const insertHandler = (newValue) => {
  if (isList) {
    onChange([...value, newValue]);
  } else {
    onChange(newValue);
  }
};
```