Tree Lists With Indeterminate Checkboxes in React

Indeterminate checkboxes — or, “semi-checked checkboxes” — can be quite a challenge to create and update in tree-structured data lists. A complete guide for creating a solution

What we will create today!

As always, you can find all relevant code in my GitLab repository.

Maybe you have encountered multi-leveled lists with checkboxes in the wild (see the image above). They can be found at many places and I’ve created several of them during my 20+ years as a developer.

Each item contains a checkbox and the state of one (or multiple) of those checkboxes might influence the state of other checkboxes. It’s a hierarchy and with several levels in the structure (the tree of items) things can become very complicated very quickly. Especially if you want your logic to be dynamic, and ready for the future.

So let’s jump straight into it! I’ll explain all the bits and pieces along the way. We’ll talk about the following topics:

• Recursion
• Checkbox component
• List Items
• Item State
• Tree component
• CheckboxList component
• updateItemStates function

Animation: our application in action.

Recursion

Before we look at the first component a very quick word upfront. If you’re not familiar with rendering React components recursively, or recursion in general, I highly encourage you to learn a bit about it before reading on. It’s quite essential. One of my other articles might be interesting:

Recursive Rendering With React Components

Checkbox component

First things first: We need a relatively simple checkbox component. In abstract terms, it’s a small component (a…