Dynamic Dependencies off a multiple choice list? - react-jsonschema-forms

Question

Suppose you had a JSON form schema like this:
{
"type": "object",
"properties": {
"food_eaten": {
"type": "array",
"title": "What kinds of food did you eat today?",
"items": {
"type": "string",
"enum": [
"Fruits",
"Meats",
"Veggies",
"Pastries"
]
},
"uniqueItems": true
},
"fruit_eaten":{
"title": "What kind of fruit did you eat?",
"type": "string"
},
"meats_eaten":{
"title": "What kind of meats did you eat?",
"type": "string"
},
"veggies_eaten":{
"title": "What kind of veggies did you eat?",
"type": "string"
},
"pastries_eaten":{
"title": "What kind of pastries did you eat?",
"type": "string"
}
}
}
And you wanted to make it so that when a user answers the "foods_eaten" question, only the relevant "x_eaten" questions appear. E.G. if the user selects "Meats" and "Veggies" under "food_eaten", then only "meats_eaten" and "veggies_eaten" would display.
I've done every variation of schema and property dependencies I can think of, tried using oneOf and anyOf, but nothing seems to work. I'd really appreciate some pointers!

Answer 1

One of the solutions mentioned in react-jsonschema-form's GitHub was to use oneOf with every combination of selections listed out.
For your case that would look something like (Code Sandbox):
{
type: "object",
properties: {
food_eaten: {
title: "What kinds of food did you eat today?",
type: "array",
uniqueItems: true,
items: {
type: "string",
enum: ["Fruits", "Meats", "Veggies", "Pastries"]
}
}
},
dependencies: {
food_eaten: {
oneOf: [
{
properties: {
food_eaten: {
const: ["Fruits"]
},
fruit_eaten: {
type: "string",
title: "What kind of fruit did you eat?"
}
}
},
{
properties: {
food_eaten: {
const: ["Meats"]
},
meats_eaten: {
type: "string",
title: "What kind of meat did you eat?"
}
}
},
{
properties: {
food_eaten: {
const: ["Veggies"]
},
veggies_eaten: {
type: "string",
title: "What kind of veggies did you eat?"
}
}
},
{
properties: {
food_eaten: {
const: ["Pastries"]
},
pastries_eaten: {
type: "string",
title: "What kind of pastries did you eat?"
}
}
},
{
properties: {
food_eaten: {
const: ["Fruits", "Meats"]
},
fruit_eaten: {
type: "string",
title: "What kind of fruit did you eat?"
},
meats_eaten: {
type: "string",
title: "What kind of meat did you eat?"
}
}
},
{
properties: {
food_eaten: {
const: ["Fruits", "Veggies"]
},
fruit_eaten: {
type: "string",
title: "What kind of fruit did you eat?"
},
veggies_eaten: {
type: "string",
title: "What kind of veggies did you eat?"
}
}
},
{
properties: {
food_eaten: {
const: ["Fruits", "Pastries"]
},
fruit_eaten: {
type: "string",
title: "What kind of fruit did you eat?"
},
pastries_eaten: {
type: "string",
title: "What kind of pastries did you eat?"
}
}
},
{
properties: {
food_eaten: {
const: ["Meats", "Veggies"]
},
meats_eaten: {
type: "string",
title: "What kind of meats did you eat?"
},
veggies_eaten: {
type: "string",
title: "What kind of veggies did you eat?"
}
}
},
{
properties: {
food_eaten: {
const: ["Meats", "Pastries"]
},
meats_eaten: {
type: "string",
title: "What kind of meats did you eat?"
},
pastries_eaten: {
type: "string",
title: "What kind of pastries did you eat?"
}
}
},
{
properties: {
food_eaten: {
const: ["Veggies", "Pastries"]
},
veggies_eaten: {
type: "string",
title: "What kind of veggies did you eat?"
},
pastries_eaten: {
type: "string",
title: "What kind of pastries did you eat?"
}
}
},
{
properties: {
food_eaten: {
const: ["Fruits", "Meats", "Veggies"]
},
fruit_eaten: {
type: "string",
title: "What kind of fruits did you eat?"
},
meats_eaten: {
type: "string",
title: "What kind of meats did you eat?"
},
veggies_eaten: {
type: "string",
title: "What kind of veggies did you eat?"
}
}
},
{
properties: {
food_eaten: {
const: ["Fruits", "Meats", "Pastries"]
},
fruit_eaten: {
type: "string",
title: "What kind of fruits did you eat?"
},
meats_eaten: {
type: "string",
title: "What kind of meats did you eat?"
},
pastries_eaten: {
type: "string",
title: "What kind of pastries did you eat?"
}
}
},
{
properties: {
food_eaten: {
const: ["Meats", "Veggies", "Pastries"]
},
meats_eaten: {
type: "string",
title: "What kind of meats did you eat?"
},
veggies_eaten: {
type: "string",
title: "What kind of veggies did you eat?"
},
pastries_eaten: {
type: "string",
title: "What kind of pastries did you eat?"
}
}
},
{
properties: {
food_eaten: {
const: ["Fruits", "Veggies", "Pastries"]
},
fruits_eaten: {
type: "string",
title: "What kind of fruits did you eat?"
},
veggies_eaten: {
type: "string",
title: "What kind of veggies did you eat?"
},
pastries_eaten: {
type: "string",
title: "What kind of pastries did you eat?"
}
}
},
{
properties: {
food_eaten: {
const: ["Fruits", "Meats", "Veggies", "Pastries"]
},
meats_eaten: {
type: "string",
title: "What kind of meats did you eat?"
},
fruits_eaten: {
type: "string",
title: "What kind of fruits did you eat?"
},
veggies_eaten: {
type: "string",
title: "What kind of veggies did you eat?"
},
pastries_eaten: {
type: "string",
title: "What kind of pastries did you eat?"
}
}
}
]
}
}
}
They do mention that the solution might become simpler after allOf gets implemented (which it is now) so perhaps you might be able to simplify this approach. I would recommend joining the RJSF discord and ask about it there, you may get some advice.