UPDATE
I have been utilizing this specific file in order to dynamically generate a list of tags using the code provided below.
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> </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;
As a result, the leaf node correctly appears as checked while the parent node does not appear to be correctly checked.
https://i.sstatic.net/yXTnk.png
Upon inspecting the HTML file, the input shows as checked:
<input class="form-check-input" type="checkbox"
name="Types" id="Types" value="Types" checked>
However, it does not display as default checked.