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
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    spellcheck Attribute

    Many useful attributes have been provided to web developers recently:  download, placeholder, autofocus, and more.  One helpful older attribute is the spellcheck attribute which allows developers to  control an elements ability to be spell checked or subject to grammar checks.  Simple enough, right?

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.

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