React indeterminate

By  on  

I've fallen in love with React.js and JSX over the years; state-based rendering and a logical workflow have made me see the light of this modern framework. That doesn't mean I don't sometimes get a bit frustrated that the "simple" things seem harder than they should be. Getting a reference to an element and modifying its properties used to be simple but now you have to take into account you don't usually have element references -- you need to think in a different way. I learned this when I needed to set a checkbox's inderterminate property, a property not recognized via an attribute, one that requires a handle on the element and setting a property directly.

To add the indeterminate property to the checkbox, I needed to take advantage of the ref attribute:

const { value, checked, indeterminate } = this.props

return render(
    <input
        type="checkbox"
        value={value}
        checked={checked}
        ref={el => el && (el.indeterminate = indeterminate)}
    />
)

Since the ref is run on each render, the indeterminate property is updated appropriately, and thus the checkbox appears as expected.

Regardless of how amazing your framework appears, there's always a blind spot that requires a bit of a hack to accomplish what's expected. That's what a framework does, though: gives you 99% of what you need and makes the 1% difficult!

Recent Features

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    CSS Vertical Center with Flexbox

    I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily...

  • By
    MooTools Accordion: Mouseover Style

    Everyone loves the MooTools Accordion plugin but I get a lot of requests from readers asking me how to make each accordion item open when the user hovers over the item instead of making the user click. You have two options: hack the original plugin...

Discussion

  1. BryanYang

    the last words are exactly. there is always something we miss when we design a framework. so the best way is to optimize again and again.

  2. > Since the ref is run on each render, the indeterminate property is updated appropriately, and thus the checkbox appears as expected.

    This is kind of true but it’s probably not working how you imagined in your head. The ref doesn’t actually get run each render, only when the component mounts/unmounts or the function passed to ref changes.

    In your example since you’re using an anonymous function this looks like a new function every time the component re-renders and so React will call it again. If you were to replace that ref with a function that doesn’t change every render (e.g ref={ this.setCheckboxRef }, this example would no longer work.

    This is the exact scenario described in the caveats section of the docs here: https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs

    Instead you want to assign the ref to a class property and listen to prop changes in componentDidUpdate and proxy them to the checkbox (if you’re using a class component) or use the new useEffect API in hooks.

  3. “gives you 99% of what you need and makes the 1% difficult!” This 1% never covers in any update…

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!