How to derive values to preserve form state integrity

I have two dropdown in my form, categories and movies.

If I select a category, some movie, and then change the category, the movie value should reset to the first option of the new movie list. Otherwise, the form would keep a movie value that doesn't belong to the selected category.

If I had to design such API, I would something like Saphyra does with reducer:

const formOptions = {
  invarianceFn({ meta, values, diff }) {
    if(diff([v => v.category])) {
      values.movie = meta.category.options[0]
    }
    
    return values
  },
}

const formOptions = {
  invarianceFn({ meta, values, diff }) {
    if(diff([v => v.category])) {
      values.movie = meta.category.options[0]
    }
    
    return values
  },
}

const formOptions = {
  invarianceFn({ meta, values, diff }) {
    if(diff([v => v.category])) {
      values.movie = meta.category.options[0]
    }
    
    return values
  },
}

const formOptions = {
  invarianceFn({ meta, values, diff }) {
    if(diff([v => v.category])) {
      values.movie = meta.category.options[0]
    }
    
    return values
  },
}

How to derive values to preserve form state integrity

Similar Threads

Similar Threads

Similar Threads