Collapsible treeview using React


I am trying to make make a collapsible treeview using react but I am unable to expand/collapse the child nodes when parent node is checked/unchecked. The reason why I am choosing this approach is because I want to make the tree generic such that it takes data with different attributes as input and prints as data[i] like in arrays instead of I would appreciate some help and corrections to create collapsible treeview.

export default class Treeview extends Component {
  constructor(props) {
    this.state = {
      visible: true

  toggle = () => {
      {visible: !this.state.visible}

  render() {
    var node =;
    return (
        {Object.keys( => {
          return (
            <li key={key} style={style}>
              <input type="checkbox" onClick={this.toggle} />
              <label>{key}</label> :
              {typeof node[key] === "object" ? (<Treeview data={node[key]}/>) : (node[key])}



This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.