# How to create control using others (React)

**URL:** <https://jsonforms.discourse.group/t/how-to-create-control-using-others-react/998>\
**Category:** General\
**Created:** [September 6, 2022, 12:48pm UTC](https://jsonforms.discourse.group/t/how-to-create-control-using-others-react/998 "2022-09-06T12:48:13Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![tujger](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/tujger/32/478_2.png) [@tujger](https://jsonforms.discourse.group/u/tujger)\
**Post date:** [September 6, 2022, 12:48pm UTC](https://jsonforms.discourse.group/t/how-to-create-control-using-others-react/998/1 "2022-09-06T12:48:13Z")

</div>

Hi,

I need to create some control using existing controls. Let’s say, I have the value:

```auto
aaa|bbb|ccc

```

I want to separate this value by | and edit each part separately. As a result I need to get similar value:

```auto
aaa|updatedbbb|ccc

```

I suppose to use for this purpose the combination of MaterialArrayControlRenderer and MaterialInputText. For example, I could set schema like this:

```auto
{
    type:"array",
    items: {
        type: "object",
        properties: {
            item: {
                type: "string",
                title: "Items"
            }
        }
    }
}

```

and uischema:

```auto
{
    type:"Control",
    scope: "#",
    options: {
        showSortButtons: true
    }
}

```

How can I change the wrapper to be able to provide the adapted data:

```auto
aaa|bbb|ccc => ["aaa","bbb","ccc"]

```

and updated handleChange to get back:

```auto
["aaa", "updatedbbb", "ccc"] => aaa|updatedbbb|ccc

```

Thank you in advance!

---

<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:** [September 11, 2022, 1:00pm UTC](https://jsonforms.discourse.group/t/how-to-create-control-using-others-react/998/2 "2022-09-11T13:00:32Z")

</div>

Hi @tujger,

I don’t fully understand what you’re going for. From my understanding: You want to model a value as a `string` but use multiple controls for editing.

If you want to handle this directly within JSON Forms then I would like to suggest to continue modeling the value as `type: 'string'` in your JSON Schema. Then you can implement a custom renderer which can render any UI you like, for example rendering multiple inputs or some advanced masking. On `handleChange` you would always save the full string value back.

If you want to avoid using a custom renderer and just handle this outside of JSON Forms, then yes, you can use a JSON Schema like you posted, e.g.

```auto
{
    type:"array",
    items: {
        type: "object",
        properties: {
            item: {
                type: "string"
            }
        }
    }
}

```

Then, BEFORE you hand your data over to JSON Forms you need to apply a transformation step which splits your string value into this string array. Then when you receive data back from JSON Forms via the `onChange` callback, you can then transform the array back into your custom string format.

Using the second approach avoids the implementation of a custom renderer and may be a good solution for prototyping. If your string however has some special meaning and you would like to also show this via the UI to the user then I would go the custom renderer route.

If you use the second approach also make sure that you don’t end up in an endless rendering loop. Whenever you hand over a new `data` object to JSON Forms a rerender and a retrigger of `onChange` will be performed. So when doing a transformation as suggested you need to break the cycle at some point.