Не работает чекбокс

Question

Имеются 2 компонента, CheckboxDelete хранит в себе состояние галки и все изменения передает в функцию checkListener, компонента DeleteElement. checkListener должен в зависимости от состояния галки формировать массив name в состоянии, который в последующем я хочу передать, но сейчас поведение чекбокса полностью неадекватно.

Upd. С поведением разобрался, у меня криво отображается состояние галок. Остался вопрос в том, что при удалении элемента из массива, у меня остаются следы прошлых состояний, как мне удалять элементы без таких следов?

class CheckboxDelete extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            checked: false,
        };
    }

    handleCheck = () => {

        this.setState(prevState => ({
            checked: !prevState.checked
        }));
        this.props.checkListener(this.state.checked, this.props.brand);
    }

    render () {
        return (
            <div>
                <br/>
                <div>
                <input className="checkboxDelete"
                       type="checkbox"
                       checked={this.state.checked}
                       onChange={this.handleCheck}/>
                <div>{this.props.brand}</div>
                </div>
            </div>
        )
    }
}

class DeleteElement extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            checked2: true,
            name: []
        };
    }

    checkAvailability = (array, name) => {
        return array.some(function(arrVal) {
            return name === arrVal;
        });
    }

    checkListener = (check, delOp) => {
        this.setState({ checked2: check });
        let names = this.state.name;
        if (check === true) {
            if (this.checkAvailability(names, delOp) === false) {
                this.setState((prevState) => ({ name: [...prevState.name, delOp] }));
            }
        } else if (check === false) {
            if (this.checkAvailability(names, delOp) === true) {
                for (let i = 0, len = names.length; i < len; i++) {
                    if (names[i] === delOp) {
                        names.splice(i, 1);
                        break;
                    }
                }
                this.setState((prevState) => ({ name: [...prevState.name, names] }));

            }
        } else {
            console.log('каво')
        }
        console.log(this.state.name)
    }


    render () {
        return (
            ....
        )
    }
}

Answer 1

Разобрался сам, как всегда затуп на ровном месте:

checkListener = (check, delOp) => {
    this.setState({ checked2: check });
    let names = this.state.name;
     if (check === true) {
        if (this.checkAvailability(names, delOp) === true) {
            for (let i = 0, len = names.length; i < len; i++) {
                if (names[i] === delOp) {
                    names.splice(i, 1);
                    break;
                }
            }
            this.setState({
                name: names
            });
        }
    }
    else if (check === false) {
        if (this.checkAvailability(names, delOp) === false) {
            this.setState((prevState) => ({ name: [...prevState.name, delOp] }));
        }
    }
     else {
        console.log('каво')
    }
}

БЛОГ НА HUSL

Не работает чекбокс

Ответы (1 шт):