How to dynamically update react-json-schema form for checkboxes

Question

I have code something like this

const Jschema = {
    "type": "object",
    "title": "Create Form",
    "required": [
        "level1",
        "level2"
    ],
    "properties": {
        "level1": {
            "type": "string",
            "title": "Level 1",
            "default": ""
        },
        "level2": {
          "type": "array",
          "items": {
              "enum": [
                  "no position"
              ],
              "type": "string"
          },
          "title": "Level 2",
          "uniqueItems": true
        },
    },
    "description": "Create Form"
  }

  const uiSchema = {
    "ui:order": [
        "level1",
        "level2"
    ],

    "level1": {
        "ui:title": "Rank Level 1",
        "ui:widget": "dropdown",
        "ui:placeholder": "Please select rank level 1"
    },
    "level2": {
      "ui:title": "Rank Level 2",
      "ui:widget": "checkboxes",
      "ui:placeholder": "Please select rank level 2"
    }
  }

  const dropDownList = {
    level1: {
      url: '/v2/level1_rank',
      name: 'level1',
      accessorName: 'level1_name',
      accessorValue: 'level1_value'
    }
  }

then will be generate on

render((
    <Form schema={schema}
          uiSchema={uiSchema}
          formData={formData} />
  ), document.getElementById("app"));

then I have some logic like this, the level1 (select dropdown) will be show position of board (CEO, CFO, CMO and CTO) if we choose CFO level2 (checkboxes) will change to be (Accounting Manager, Finance Manager, Fraud Manager), if we choose CTO level2 will change to be (IT Manager, Infra Manager etc). let say I have backend and the backend was generate to state. I just get the state and need update the "items:" on level2 checkboxes.

So my question is how to change the "items:" on level2 by dynamically when I choose the level1 In my case, I want to select CFO, the the level2 checkbox will show three of position (Accounting Manager, Finance Manager, Fraud Manager etc) in CFO department, then I choose Accounting Manager and Fraud Manager only.

Thank you

Did u find a solution for this @Kyoo – user1556718 Oct 15 '21 at 19:29 — user1556718, Oct 15 '21 at 19:29

score 0 · Answer 1 · answered Mar 07 '20 at 15:17

0

Individual input

In order to achieve this conditional field effect, normally it can be done via separate inputs.

  <Input name="input1" value={value1} onChange={onChange1} />
  <Input name="input2" value={value2} onChange={onChange2} />

Assuming both inputs are controlled via value and onChange, then you could wire with your own logic as

  const onChange1 = e => {
    if (e.target.value === '1') {
      value2 = '2'
    }
  }

Form handling

The above is assuming you have individual control. But if have a Form or useForm, you can still make it happen if you have access to the form values and setValues.

  useEffect(() => {
    if (values.input1 === 1) {
      setValues({ input2: 2 })
    }
  }, [values])

answered Mar 07 '20 at 15:17

windmaomao

7,120
2
32
36

1

this mean we are not using
– Kyoo Mar 07 '20 at 16:17
You can read documentation of this `Form` to see how to set (or provided) `value` and `setValues`. Because whoever write that library they have to expose those two interfaces. – windmaomao Mar 07 '20 at 16:25
the doc only show by hardcode ``` "multipleChoicesList": { "type": "array", "title": "A multiple choices list", "items": { "type": "string", "enum": [ "foo", "bar", "fuzz", "qux" ] }, "uniqueItems": true ``` That's why I confused :) – Kyoo Mar 07 '20 at 16:38
i see you have `formData`, what is that ? this to me might be `values`. What is the name of this component `Form` from which library ? – windmaomao Mar 07 '20 at 16:41
formData is standard from react-json-schema – Kyoo Mar 09 '20 at 01:18

How to dynamically update react-json-schema form for checkboxes

1 Answers1

Individual input

Form handling