Tuesday, 22 January, 2019 UTC


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 ot 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(
        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!
The post React indeterminate appeared first on David Walsh Blog.