Невозможно установить свойство «неопределенный» для нуля в React

Question

В моем приложении мне нужно что-то вроде:

Когда значение вопроса равно нулю, флажок должен отображаться как неопределенный, в противном случае должен быть установлен или не отмечен.

Нопроблема в том, что когда я обновляю вопросы, он показывает мне ошибку:

TypeError: Невозможно установить свойство 'indeterminate' со значением null

Мой объект вопросов в состоянии похож наthis:

questions: [{
    id: 1,
    title: 'First Question',
    answers: [
        {
            id: 2,
            title: 'Java',
            value: ''
        },
        {
            id: 3,
            title: 'Python',
            value: ''
        },
        {
            id: 4,
            title: '.NET',
            value: true
        }
    ]
}]

Таким образом, это означает, что третий флажок должен быть установлен, а два других должны быть показаны как неопределенные.См. Рисунок ниже:

Поэтому, когда я нажимаю на первый, он должен стать неконтролируемым, и после повторного щелчка его значение должно быть истинными должен стать проверенным.И их значение никогда не будет '' когда-либо, за исключением того, что это может быть в первый раз.

Вот вопрос.jsx

import React, { Component } from 'react';

class Question extends Component {
    state = {
        questions: []
    }

    componentDidMount() {
        const questions = [{
            id: 1,
            title: 'First Question',
            answers: [
                {
                    id: 2,
                    title: 'Java',
                    value: ''
                },
                {
                    id: 3,
                    title: 'Python',
                    value: ''
                },
                {
                    id: 4,
                    title: '.NET',
                    value: true
                }
            ]
        }, {
            id: 2,
            title: 'Second Question',
            answers: [
                {
                    id: 5,
                    title: 'MongoDB',
                    value: ''
                },
                {
                    id: 6,
                    title: 'MSSQL',
                    value: ''
                },
                {
                    id: 7,
                    title: 'MySQL',
                    value: ''
                }
            ]
        }, {
            id: 3,
            title: 'Third Question',
            answers: [
                {
                    id: 8,
                    title: 'ReactJs',
                    value: ''
                },
                {
                    id: 9,
                    title: 'Angular',
                    value: ''
                },
                {
                    id: 10,
                    title: 'VueJs',
                    value: ''
                }
            ]
        }]
        this.setState({
            questions
        })
    }

    setIndeterminate = (elm, value) => {
        if (value !== '') {
            elm.checked = value;
            elm.indeterminate = false;
        }
        else {
            elm.checkbox = false;
            elm.indeterminate = true;
        }
    }

    handleOnChange = ({ currentTarget: checkbox }) => {
        var questions = [...this.state.questions];
        questions.map(p => {
            p.answers.map(a => {
                if (a.id == checkbox.id) {
                    a.value = (a.value === '') ? false : !a.value;
                    return;
                }
            })
        })

        this.setState({
            questions
        })
    }

    render() {
        const { questions } = this.state
        return (
            <div>
                {questions.map(question =>
                    <div key={question.id} className='question-wrapper'>
                        <div className="row">
                            <h6 className='text-left'>{question.title}</h6>
                        </div>
                        {question.answers.map((answer, i) =>
                            <div key={answer.id} className="form-group row">
                                <div className="form-check">
                                    <input onChange={this.handleOnChange} ref={elm => this.setIndeterminate(elm, answer.value)} value={answer.value} className="form-check-input" type="checkbox" id={answer.id} name={answer.id} />
                                    <label className="form-check-label" htmlFor={answer.id}>
                                        {answer.title}
                                    </label>
                                </div>
                            </div>
                        )}
                    </div>
                )}
            </div>
        );
    }
}

export default Question;

Как это возможно, если вы можетевидите, я уже установил для промежуточного значения значение true или false?

SOLUTION

Я удалил эту функцию setIndeterminate и сделалэто внутри ref во входном элементе:

<input onChange={this.handleOnChange} ref={elm => {
    if (elm) {
        elm.checked = (answer.value !== '') ? answer.value : false;
        elm.indeterminate = (answer.value === '') ? true : false;
    }
}} value={answer.value} className="form-check-input" type="checkbox" id={answer.id} name={answer.id} />

Я думаю, проблема в том, что мне нужно было добавить это if (elm), чтобы сначала проверить это.