# Why is custom renderer always firing? Desired outcome is for it to be triggered on array item selection

**URL:** <https://jsonforms.discourse.group/t/why-is-custom-renderer-always-firing-desired-outcome-is-for-it-to-be-triggered-on-array-item-selection/2034>\
**Category:** General\
**Created:** [March 18, 2024, 2:59pm UTC](https://jsonforms.discourse.group/t/why-is-custom-renderer-always-firing-desired-outcome-is-for-it-to-be-triggered-on-array-item-selection/2034 "2024-03-18T14:59:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![johno\_1000](https://avatars.discourse-cdn.com/v4/letter/j/d26b3c/32.png) [@johno\_1000](https://jsonforms.discourse.group/u/johno_1000)\
**Post date:** [March 18, 2024, 2:59pm UTC](https://jsonforms.discourse.group/t/why-is-custom-renderer-always-firing-desired-outcome-is-for-it-to-be-triggered-on-array-item-selection/2034/1 "2024-03-18T14:59:01Z")

</div>

Hi,

With react using the ratings example I am trying to render it when array selection is ‘selection\_2’ however it is always showing. The default renderer of string works as expected and shows with selection of ‘selection\_1’. Any ideas?

Schema

```auto
{
  "type": "object",
  "properties": {
    "content_name": {
      "type": "string",
      "minLength": 3
    },
    "selection": {
      "type": "string",
      "title": "Select your option",
      "oneOf": [
        {
          "const": "selection_1",
          "title": "selection 1 show only string"
        },
        {
          "const": "selection_2",
          "title": "selection 2 show only rating"
        }
      ]
    },
    "some-string": {
      "type": "string"
    },
    "some-rating": {
      "type": "integer"
    }
  },
  "additionalProperties": true,
  "required": [
    "content_name"
  ]
}

```

uiSchema

```auto
{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/content_name"
    },
    {
      "type": "Control",
      "scope": "#/properties/selection"
    },
    {
      "type": "Control",
      "scope": "#/properties/some-string",
      "rule": {
        "effect": "SHOW",
        "condition": {
          "scope": "#/properties/selection",
          "schema": {
            "enum": [
              "selection_1"
            ]
          }
        }
      }
    },
    {
      "type": "Control",
      "scope": "#/properties/some-rating",
      "rule": {
        "effect": "SHOW",
        "condition": {
          "scope": "#/properties/selection",
          "schema": {
            "enum": [
              "selection_2"
            ]
          }
        }
      }
    
    }
  ]
}

```

Tester

```auto
import { rankWith, scopeEndsWith } from '@jsonforms/core';

export default rankWith(
  3, // Increase rank as needed
  scopeEndsWith('rating')
);

```

---

<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:** [March 18, 2024, 4:13pm UTC](https://jsonforms.discourse.group/t/why-is-custom-renderer-always-firing-desired-outcome-is-for-it-to-be-triggered-on-array-item-selection/2034/2 "2024-03-18T16:13:57Z")

</div>

Hi @johno_1000,

Is this about the `RatingControl` [which is implemented](https://github.com/eclipsesource/jsonforms-react-seed/blob/7c57180ee581dda8d2336730655ccb5498eed8a2/src/RatingControl.tsx) in the JSON Forms React seed? That control is very simple. It will be handed over a `visible: false` prop which it should respect, however as you can see it just ignores it and renders anyway.

Conceptually every renderer has its own rendering under full control. However it should play nice and if indicated `visible: false` it should then also not render anything.

---

<div class="post-metadata">

**Author:** ![johno\_1000](https://avatars.discourse-cdn.com/v4/letter/j/d26b3c/32.png) [@johno\_1000](https://jsonforms.discourse.group/u/johno_1000)\
**Post date:** [March 18, 2024, 5:01pm UTC](https://jsonforms.discourse.group/t/why-is-custom-renderer-always-firing-desired-outcome-is-for-it-to-be-triggered-on-array-item-selection/2034/3 "2024-03-18T17:01:33Z")

</div>

Thank you for the swift response @sdirix but apologies I dont quite follow. Yes I have used the rating control in the seed for testing purposes.

Some-rating field is not supposed to show at all when form is displayed (right now it shows below the dropdown). Then, this field should only become visible when selection\_2 is picked. Do you mean that some-rating should be hidden, until picking selection\_2 makes it visible? How would that be achieved?

Additionally, when selection\_1 is picked, rating field is shown anyway - it’s not being shown when selection\_1 is picked, it’s been there all this time, since the page loaded. Would that require hiding in some way?

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:** [March 18, 2024, 5:10pm UTC](https://jsonforms.discourse.group/t/why-is-custom-renderer-always-firing-desired-outcome-is-for-it-to-be-triggered-on-array-item-selection/2034/4 "2024-03-18T17:10:24Z")

</div>

This is the current implementation of `RatingControl`:

```auto
const RatingControl = ({ data, handleChange, path }: RatingControlProps) => (
  <Rating
    value={data}
    updateValue={(newValue: number) => handleChange(path, newValue)}
  />
);

```

As you can see, it ignores all but three props handed over to it.

It needs to be improved to react to `visible` hints, e.g.

```auto
const RatingControl = ({ data, handleChange, path, visible }: RatingControlProps) => {
  if (!visible) {
    return null;
  }
  return (
    <Rating
      value={data}
      updateValue={(newValue: number) => handleChange(path, newValue)}
    />
  );
}

```

Also it should be enhanced to for example react to `enabled`.

---

<div class="post-metadata">

**Author:** ![johno\_1000](https://avatars.discourse-cdn.com/v4/letter/j/d26b3c/32.png) [@johno\_1000](https://jsonforms.discourse.group/u/johno_1000)\
**Post date:** [March 19, 2024, 9:40am UTC](https://jsonforms.discourse.group/t/why-is-custom-renderer-always-firing-desired-outcome-is-for-it-to-be-triggered-on-array-item-selection/2034/5 "2024-03-19T09:40:28Z")

</div>

Perfect that sorted it, thanks!