Dynamic Dependencies off a multiple choice list?

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.