React-jsonschema-form: fetch or populate a dropdown based on selection from other dropdown

[eyesmoker]

Say, I have 2 dropdowns (A and B). Dropdown A values are 1 and 2. Dropdown B should be populated based on value selected from Dropdown A. Say, I have a mapping (1 -> ABC, 1->BCD, 2-> CDE, 2->DEF)
When I choose value "1" from dropdown A, I would like to populate second dropdown B with values (ABC and BCD).
It is very easy to define dropdown values using definitions concept. I have looked at dependencies examples (like showing billing address based on credit card field) but I haven't seen a example that I am looking for. Any pointers are greatly appreciated.

[eyesmoker]

Any update? This is very critical functionality that will help us choose whether we can use the react jsonschema framework.

[KKS1]

@eyesmoker I would suggest hooking into form changeHandler. Abstract the formData from here and pass it to your custom auto calculator function which can have logics such as "formData.fieldB = formData.fieldA;". In your case mentioned above, basically a map will be linking these fields in autoCalculate function, where keys are in fieldA and corresponding array based values in fieldB

[epicfaace]

@eyesmoker sorry for the delay. There is no way to encode in the JSON schema how it will change in response to data. However, as @KKS1 mentioned, you can store the schema in the state and dynamically change it during the onChange handler of the form. Here's an example (although the fiddle seems to be currently broken, you can see from the code what it's doing): https://jsfiddle.net/69z2wepo/88541/

[epicfaace]

actually @eyesmoker I was wrong above -- there _is_ a way to do this using dependencies. See this playground example for how to do it.

[bharadhwaj-g]

@epicfaace @KKS1
I'm also looking for similar kind of functionality, but a lit bit of extra mile i.e
Playground example

Here I've two fields

• Number of extra letters
• Number of contact campaigns

Based on these two fields I've other fields which are dynamic i.e

• When should contact campaign 1 start? and this an dropdon field, which options are dependent on Number of extra letters.

For example

• Number of extra letters = 2 (options)
• Number of contact campaigns = 3 (fields)
  Then we should display three fields
• When should contact campaign 1 start?
• When should contact campaign 2 start?
• When should contact campaign 3 start?
  and each field is an dropdown which should have options (Option-1 and Option-2) these options are depends on Number of extra letters selected

Right now in my example I've added Enum options that supposed to be dynamic based on the selection of Number of extra letters

So could you please help me out for how to achieve this, I've tried onchange hanlder as well in that case its able to achieve partially but the problem is if the field is already render, then its not updating it options (Because I'm not storing the formData in store)

[KKS1]

Hi @bharadhwaj-g , one idea that can help while using onChangeHandler approach in your case, is to "have a hidden widget that stores the dropdown options under formData". That way, as formData for this hidden field updates, it will re-render the options in those dropdowns. Later, you can omit the extra data, with the omitExtraData flag, before submission.

[bharadhwaj-g]

@KKS1 , I've implemented the functionality, I failed to map dropdown options (Enums) with hidden widget, not sure how to do that, could you please provide a playground or JS fiddle.

[KKS1]

Hi @bharadhwaj-g , created an end-to-end flow in sandbox for your use case, plus for anyone looking to add dynamic properties in the form.
https://codesandbox.io/s/rjs-playground-y8er4

Hope it helps, cheers!

-Kanwaljeet Kalra

[epicfaace]

Thanks @KKS1 .

I believe the original issue has been resolved so I'm closing this. Feel free to open up another issue if there are any other problems though!