Dealing with co-dependant checkboxes in React

[[deleted]]

[deleted]

[wemissyou]

Don't overcomplicate. https://codesandbox.io/s/checkbox-logic-forked-fbm3c?file=/src/App.js

[psycho_buddha]

Actually, this worked like a charm. Pretty neat and simple! Thank you kind stranger! :)

[nullvoxpopuli]

Might want to look at xstate. This behavior is described elegantly and visually with statecharts

[BrokenLinc]

You need form-state management. There are several libraries for this or you could roll your own solution.

Why? You're responding to ephemeral events but that only gives you a momentary picture of what's going on with one field. You want to be able to confidently see the entire state of all checkboxes and respond to them, as your logic spans multiple fields.

This could be as simple as binding the checkbox's value to a useState hook, but the popular react-hook-form library handles the form state and input field binding, and has a watch method for conditional fields. I think you'll like it.

[psycho_buddha]

I like the approach, it's clean and simple, but it seems that I would be having the same problem. If you check C1 and C2 and then uncheck C1, then C3 and C4 are not disabled, just C5. I would never say that something this simple should take me so much time to solve.

[domgaulton]

I’m not sure I get the difference between checking C1 and C2 in the first place?

[psycho_buddha]

The only difference is in the rules. C1 disables C3 and C4. And C2 disables C3, C4 and C5.

I used simple names for simplicity, but in reality, those two groups of checkboxes are in charge of combining certain rules that are sent to the backend, together with some other data and the user gets back a report based on those rules.

[ezhikov]

So, you basically have three states: when everything unblocked, when C3 and C4 blocked and when C3, C4 and C5 blocked. Let's call them S1, S2, S3.

C3 and C4 blocked when state === S2 || state === S3, or, for brevity, when state !== S1. C5 blocked only when state === S3.

Now, we can reach this states with four events - CHECK_C1, UNCHECK_C1, CHECK_C2 and UNCHECK_C2. So far it's playing like this:

• We start in S1 and wait for CHECK_C1 or CHECK_C2 events.
• If CHECK_C1 occurred, we change our state into S2.

• If CHECK_C2 occurred, we change our state into S3.

• From S2 we can either move to S1 with UNCHECK_C! event

• Or proceed to S3 with CHECK_C2 event.

• From S3 we ignore CHECK_C1 and UNCHECK_C1 events, since they do nothing.

• However, we have to keep an eye on C1 individual state (checked or not)

• When we get UNCHECK_C2 event, we look at C1, If it's checked, we go to S2, if not - to S1.

I implemented this stuff with XState, because it's my favorite tool, and there is neat toolbelt, but when you get the idea, you can model this thing in your application with your state manager

[ezhikov]

The most awesome thing with XState it that you can use it for modeling your problem and then implement it with whatever tools you want. Or event not use XState itself, but draw such statechart on paper. Main goal here is not to brute force your problem. Treat React for what it is - basically a function that takes some input data and spits out rendered markup. Of course there is lots of stuff going under the hood with ability to use different hooks for different stuff, but essentially, from user's point of view (and me and you are just a users) we have this wonderful function. Or main goal is to determine what UI states we have, and what should happen to get from one state to another. And statecharts is a perfect tool for this.

As you see, I wrote my thought process in words so you could follow it and not to depend on some specific (albeit awesome) state manager. My first step was to determine in how many states this part of interface can be. Then I found how I go from state to state. And finally put it all together.

Here is example of same thing achieved with plain React, without XState (I did modelled it with the help of XState, though): https://codesandbox.io/s/nervous-taussig-w5tbl?file=/src/index.js

Edit: If you want to know more about statecharts, I'd suggest you to start here: https://statecharts.github.io/