Pete V. Pete V. - 1 month ago 41
Javascript Question

indeterminate checkbox in React JSX

How do I render an indeterminate checkbox in JSX?

Here's what I've tried:

render() {
return <input type="checkbox"
checked={this.props.state === "checked"}
indeterminate={this.props.state === "indeterminate"} />
}


However,
indeterminate
is not an attribute on the
HTMLElement
, but a property. How do I set properties from React / JSX?

Answer

You can use the componentDidMount step (which is invoked after the initial rendering) to set that property:

componentDidMount() {
    React.findDOMNode(this).indeterminate = this.props.state === "indeterminate";
}

If you want that property to be updated with subsequent renders, do the same thing in componentDidUpdate also.