Checkbox did not update during onChange event (Vanilla / React)

General
1

I have a strange situation during developing a new custom component.
The component deals with Radio Buttons and Checkboxes. A Radio Button is used in case the data value is a single string and the Checkbox Button is used in case the data value in an array.

Technical all works well the data values/array are updated according to the situation and the new values can be received by my backend component GLSP server.

But the checked state is not visualized by react. The Checkbox is visually not updated. Only if I click on another element.

What could be the reason for this behaviour?

Peek 2023-03-02 16-42

This is the method handling the onChange event.

2

Hi @rsoika,

In React props should not be directly modified. In the linked code the data handed over by JSON Forms is directly modified, i.e.

        if (!data.includes(value)) {
          data.push(value);
        } else {
          const iPos: number = data.indexOf(value);
          if (iPos !== -1) {
            data.splice(iPos, 1);
          }
        }
// [...]
      handleChange(path, data);

handleChange should receive a new data array. Instead the already existing data array is just set again. This bypasses the React conventions that changed props should have a different identity. Therefore React thinks data did not change and optimizes the render pass by not rerendering. I’m not sure why only clicking into Selection then triggers a rerender, that should be investigated.

The code should be changed to something like this

       let newData;
       if (!data.includes(value)) {
          newData = [...data, value];
        } else {
          const iPos: number = data.indexOf(value);
          newData = data.slice();
          newData.splice(iPos, 1);
        }
// [...]
      handleChange(path, newData);
3

Hi @sdirix
thanks a lot !! you saved my day!
I was not aware of this internals from react. I think I should read more books about react :wink:

My new SelectItem component is realy cool. I will publish it in my Blog soon. I think is is nothing for the general vanialla renderer but it maybe helpful for some other developers…

4

Sounds good! In case the renderer is generic enough that other developers also might want to reuse it we could list it here: Community - JSON Forms