checkbox has checked values but does not show checked

Question

UPDATE

I have been using this file to recursively create the list of tags with the following code.

import React from "react";


class TagElement extends React.Component{

    updateCheck(e){
        var v = (e.target.checked)? e.target.value : false
        this.props.checkEvent(v)
    }

    render(){
        const tag_name = this.props.tagElement;
        const tag_id = Math.random();
        return(
            <div className="form-check">
                <input className    =   "form-check-input" 
                    type            =   "checkbox" 
                    defaultChecked  =   {this.props.checked}
                    name            =   {tag_name}
                    id              =   { tag_id }
                    onChange        =   {(e) => this.updateCheck(e)}
                    />
                <label className="form-check-label" htmlFor={tag_id}>
                    { tag_name  + " " + this.props.checked }
                </label>
            </div>
        )
    }
}

class TagTree extends React.Component{

    state = {
        key : "",
        val : [],
        display : "none"
    }

    onCheck(v){
        this.setState({ display : v? "block" : "none"})
    }

    componentDidMount(){

        const tagkey = Object.keys(this.props.tagTree)[0]
        const tagval = this.props.tagTree[tagkey]
        const includedActiveList = this.props.activeTags.includes(tagkey)

        this.setState(
            {
                key : tagkey,
                val : tagval,
                display : includedActiveList ? "block" : "none"
            }, () => {})
    }

    checkCheck(tag){
        return (this.props.activeTags.includes(tag))
    }

    render(){

        return(
            <React.Fragment>
                <TagElement tagElement={this.state.key} 
                    checkEvent={(v) => this.onCheck(v)}
                    activeTags={this.props.activeTags}
                    checked={this.checkCheck(this.state.key)}
                    />
                <ul className="tag-check-box" style={{display: this.state.display}}>
                    <li>
                        { this.state.val.map( t => (typeof(t) === 'object') ? 
                            <TagTree tagTree={t} checkedTrue={this.state.check} 
                                key={Math.random()}
                                activeTags={this.props.activeTags}/> : 
                            <TagElement tagElement={t} key={Math.random()}
                                activeTags={this.props.activeTags}
                                checked={this.checkCheck(t)}
                                /> )}
                    </li>
                </ul>
            </React.Fragment>
        )
    }
}



class TagApp extends React.Component{
    state = {
        activeTags : ["Algebra", "Sequence and Series", "Types", "Arithmatic Progression", "Arithmatic Mean"]
    }

    render(){
        return(
            <div>
                <div>&nbsp;</div>
                <h4>Select Tags</h4>
                <ul className="tag-check-box">
                    <li>
                        { this.props.tagList.map( t =>  
                            <TagTree tagTree={t} key={Math.random()} 
                                activeTags={this.state.activeTags} /> 
                        )}
                    </li>
                </ul>
            </div>
        )
    }
}

export default TagApp;

 

The result is that the end node is properly displayed checked while the parent node is not properly checked.

If I inspect the HTML file then the input shows checked.

<input class="form-check-input" type="checkbox" 
       name="Types" id="Types" value="Types" checked>

but it does not show the default checked.

Answer 1

Either you do defaultChecked or value or checked, not all of them.

import React from "react";


class TagElement extends React.Component{

    updateCheck(tag_name){
        const checked = this.props.activeTags.includes(tag_name)
        this.props.checkEvent(!checked)
    }

    checkCheck(tag){
        return (this.props.activeTags.includes(tag))
    }

    render(){
        const tag_name = this.props.tagElement;

        return(
            <div className="form-check">
                <input className="form-check-input" 
                    type="checkbox" 
                    name = {tag_name}
                    id={ tag_name }
                    checked={this.checkCheck(tag_name)}
                    onChange={() => this.updateCheck(tag_name)}
                    />
                <label className="form-check-label" htmlFor={this.props.text}>
                    { tag_name }
                </label>
            </div>
        )
    }
}

NOTE: I removed the defaultChecked and value properties in favor of checked.

See example from React here

And here is sandbox example