Indeterminate checkbox in React JSX

Question

How do I render an indeterminate checkbox via JSX?

Here\'s what I\'ve tried:

function ICB({what}) {
  return 

        

Answer 1

Dont use React.findDOMNode(this). It is risky.

export class SelectAll extends Component {
constructor(props) {
    super(props);
    this.state = {
        checked: false
    };
    this.myRef = React.createRef();
    this.onChange = this.onChange.bind(this);
    this.update = this.update.bind(this);
}

onChange(e) {
    const checked = e.target.checked;
    this.setState({
        checked: checked
    });
    this.selectAllNode.indeterminate = false;
}

update(state: {
    checked: Boolean,
    indeterminate: Boolean
}) {
    this.setState({
        checked: state.checked
    });
    this.myRef.current.indeterminate = state.indeterminate;
}

render() {
    return ( <
        input type = "checkbox"
        name = "selectAll"
        checked = {
            this.state.checked
        }
        onChange = {
            this.onChange
        }
        ref = {
            this.myRef
        }
        />
    );
}
}