Чекбокс на странице редактирования в React JS всегда в состоянии checked?

Question

[Andrej Kopp]

При разработке админпанели на React JS в Laravel столкнулся с проблемой. Данные при создании и редактировании сохраняются в базу данных, но сама галочка чекбокса в независимости от полученных данных из поля status (откуда и должно браться значенип) выводится чекбокс в состоянии checked. Рендер при этом принимает в коде нормальное положение при checked = true и checked =false, а также их сохраняет.

Вот код:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class BattleEdit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            battle: '',
            status: !("")  ? 1 : 0,
            checked: !("")  ? 1 : 0,
        };
        // bind
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    // handle change
    handleChange(e) {
        this.setState({
            name: e.target.value
        });
        console.log('onChange', this.state.name);
    }
    handleClick(e) {
        const { target } = e;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const { name } = target;

        this.setState({
            checked: value
        });
        console.log('onClick', value ? 1 : 0);
    }
    // create handleSubmit method right after handleChange method
    handleSubmit(e) {
        // stop browser's default behaviour of reloading on form submit
        e.preventDefault();
        axios
            .put(`/admin/json/battles/${this.props.match.params.id}`, {
                name: this.state.name,
                status: this.state.checked ? 1 : 0
            })
            .then(response => {
                console.log('successfully edited the task');
                this.props.history.push('/');
            });
    }
    // get all tasks from backend
    getBattles() {
        axios.get(`/admin/json/battles/${this.props.match.params.id}/edit`).then((
            response // console.log(response.data.battles)
        ) =>
            this.setState({
                battle: response.data.battle,
                name: response.data.battle.name,
                status: response.data.battle.status
            })
        );
    }
    // lifecycle method
    componentWillMount() {
        this.getBattles();
    }

    render() {
        console.log(this.props.match.params.id);
        return (
                    <div className="col-md-12">
                        <div className="card">
                            <div className="card-header">Edit Battle</div>
                            <div className="card-body">
                                <form onSubmit={this.handleSubmit}>
                                    <div className="form-group">
                                        <input
                                            type="text"
                                            onChange={this.handleChange}
                                            value={this.state.name}
                                            className="form-control"
                                            required
                                        />
                                    </div>
                                    <div className="form-check">
                                        <input type="checkbox"
                                            className="form-check-input"
                                            name="status"
                                            defaultChecked={this.state.checked ? 1 : 0}
                                            onClick={this.handleClick}
                                            value={this.state.checked ? 1 : 0}
                                        />
                                        <label className="form-check-label">
                                            Active
                                        </label>
                                    </div>
                                    <button type="submit" className="btn btn-primary">
                                        Edit Battle
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
        );
    }
}

export default BattleEdit;

Если в конструкторе у this.state.checked подставить 0 или 1, то после ребуилда галочка принимает нужное значение. Каким образом можно получить значение из поля status и вставить туда? Или же есть какой-то другой выход для записи этого значения в DOM?