how do i set programmatically checkbox property 'checked' or 'defaultChecked' in react

i am developing web application with react.

I want to dynamically set 'checked' property on checkbox.

It showed a proper screen that i wanted, but not working when i programmatically set 'checked' property.

So, i have searched about this.

some people recommended to use 'defaultChecked' property.

ant then i tried this. but failed.

It has not changed when i had given event that programmatically set checked property. It always showed defaultChecked value.

source code

render() {
list = {
 resource: {[...], [...] },
 ...
}
return (
<ParameterContainer values={ list } />
);
}

    class ParameterContainer extends React.Component {
    constructor(props) {
        super(props);

    }
    render() {
        const { values } = this.props;
        return (
            <div className="parameter-table">
                <div className="parameter-row-container">
                    <ul className="parameter-row title">
                        <li className="parameter parameter-1">valid</li>
                        <li className="parameter parameter-2">Key</li>
                        <li className="parameter parameter-3">Type</li>
                        <li className="parameter parameter-4">oid</li>
                        <li className="parameter parameter-5">rid</li>
                        <li className="parameter parameter-6">desc</li>
                    </ul>
                    {
                        values.resource.map((value, i) => {//one row
                            return (
                                <ParameterItem value={ value } index={ i } key={ i }/>
                            );
                        })
                    }
                </div>
            </div>
        );
    }
}

class ParameterItem extends React.Component {
    constructor(props) {
        super(props);

    }

    render() {
        const { value, index } = this.props;
        const items = [];

        for (let o in value) {
            if (o === "valid") {
                continue;
            }
            items.push(value[o]);
        }
        return (
            <ul className={`parameter-row parameter-row-${ index+1 }`}>
                <li className="parameter parameter-1">
                    <input type="checkbox" defaultValue={ value.valid } checked={ value.valid } onChange={ this.toggle }/> //i tried to this.
                    <Checkbox isChecked={ value.valid } /> // and then tried this...
                </li>
            </ul>
        );
    }

    toggle(e) {
        $(e.target).prop("checked", e.target.checked ? 0 : 1);
    }
}

class Checkbox extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            checked: !!this.props.isChecked
        };
    }

    handleChange = (e) => {
        const { target: { checked }} = e;
        this.setState({ checked });
    }

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