# addItem not working in array control

**URL:** <https://jsonforms.discourse.group/t/additem-not-working-in-array-control/259>\
**Category:** General\
**Created:** [July 1, 2021, 7:57pm UTC](https://jsonforms.discourse.group/t/additem-not-working-in-array-control/259 "2021-07-01T19:57:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [July 1, 2021, 7:57pm UTC](https://jsonforms.discourse.group/t/additem-not-working-in-array-control/259/1 "2021-07-01T19:57:13Z")

</div>

I have copied the array control internals from both the Vanilla and Material UI packages to test how it is working. When I call the `addItem` function within my component nothing happens. The state isn’t updated at all, the forms onChange handler isn’t called either. Can I get some more information on how this addItem is exactly working because it doesn’t seem to be able to update my forms data at all and there are no error message or feedback on what could possible be wrong.

```auto
import range from 'lodash/range';
import React, { useMemo } from 'react';
import {
    ArrayControlProps,
    Helpers,
    JsonFormsRendererRegistryEntry,
    composePaths,
    createDefaultValue,
    findUISchema,
    isObjectArrayControl,
    rankWith
} from '@jsonforms/core';
import { JsonFormsDispatch, withJsonFormsArrayControlProps } from '@jsonforms/react';

const ArrayControl: React.FC<ArrayControlProps> = ({
    addItem,
    data,
    path,
    renderers,
    schema,
    uischema,
    uischemas
}) => {
    const childUiSchema = useMemo(
        () => findUISchema(uischemas || [], schema, uischema.scope, path),
        [uischemas, schema, uischema.scope, path]
    );
    const labelDescription = Helpers.createLabelDescriptionFrom(uischema, schema);
    const label = labelDescription.show ? labelDescription.text : '';
    return (
        <div>
            <fieldset>
                <legend>
                    <button
                        onClick={() => {
                            addItem(path, createDefaultValue(schema));
                        }}
                    >
                        +
                    </button>
                    <label className={'array.label'}>{label}</label>
                </legend>
                <div>
                    {data ? (
                        range(0, data.length).map(index => {
                            const childPath = composePaths(path, `${index}`);

                            return (
                                <JsonFormsDispatch
                                    key={childPath}
                                    path={childPath}
                                    renderers={renderers}
                                    schema={schema}
                                    uischema={childUiSchema || uischema}
                                />
                            );
                        })
                    ) : (
                        <p>No data</p>
                    )}
                </div>
            </fieldset>
        </div>
    );
};

const ArrayControlRenderer = withJsonFormsArrayControlProps(ArrayControl);

const renderer: JsonFormsRendererRegistryEntry = {
    renderer: ArrayControlRenderer,
    tester: rankWith(
        2,
        isObjectArrayControl
    )
};

export default renderer;

```

_[[original thread](https://spectrum.chat/jsonforms/general/additem-not-working-in-array-control~6662c870-b772-47c4-88d4-dcf8ac3d60ea) by Chad Johnson]_

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [July 2, 2021, 7:22am UTC](https://jsonforms.discourse.group/t/additem-not-working-in-array-control/259/2 "2021-07-02T07:22:12Z")

</div>

Hi @chad-johnson(chad-johnson), `addItem`[is a function factory](https://github.com/eclipsesource/jsonforms/blob/38153357a5b6dc0a02d940199fb71121f4197001/packages/core/src/util/renderer.ts#L650). Therefore you need to call `addItem(path, createDefaultValue(schema))();`. The intended use case is like this:

```auto
onClick={addItem(path, createDefaultValue(schema)}

```

---

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [July 2, 2021, 6:10pm UTC](https://jsonforms.discourse.group/t/additem-not-working-in-array-control/259/3 "2021-07-02T18:10:17Z")

</div>

_[Chad Johnson]_

Thanks for the quick response! I thought I had checked this but I guess I didn’t.

---

<div class="post-metadata">

**Author:** ![cguardia](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/cguardia/32/130_2.png) [@cguardia](https://jsonforms.discourse.group/u/cguardia)\
**Post date:** [August 26, 2021, 10:21am UTC](https://jsonforms.discourse.group/t/additem-not-working-in-array-control/259/4 "2021-08-26T10:21:12Z")

</div>

How about if I need to call addItem several times? I was trying to create an import function using the addItem call like above, like so:

`accounts.forEach((account) => { addItem(path, account)() });`

However, this causes the MaterialTableControl to be re-rendered a huge number of times, until react throws an error (Maximum update depth exceeded). Any idea how to do this properly?

Thanks!

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [August 30, 2021, 3:00pm UTC](https://jsonforms.discourse.group/t/additem-not-working-in-array-control/259/5 "2021-08-30T15:00:42Z")

</div>

Hi! We’ll definitely take a look at our table implementation in the near future as its rerenderings are definitely too slow.

In the mean time you can batch your changes to the array and do them at once. If you have a `handleChange` available you can dispatch a new array this way. If not you need to inject `dispatch` from `useJsonForms()` (i.e. `const { dispatch } = useJsonForms()`) and then dispatch an update action yourself.

Edit: Our table rerenderings are slow but they should not result in `update depth exceeded`. Please make sure that `addItem` is not executed with each rerender and therefore results in an endless loop. This is the most likely issue here.

---

<div class="post-metadata">

**Author:** ![cguardia](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/cguardia/32/130_2.png) [@cguardia](https://jsonforms.discourse.group/u/cguardia)\
**Post date:** [August 30, 2021, 3:18pm UTC](https://jsonforms.discourse.group/t/additem-not-working-in-array-control/259/6 "2021-08-30T15:18:45Z")

</div>

I ended up using handleChange to set the whole array at once. Thanks a lot.