Collapsible treeview using React


#1

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 this.props.data.title. I would appreciate some help and corrections to create collapsible treeview.

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

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

  render() {
    var node = this.props.data;
    return (
      <ul>
        {Object.keys(this.props.data).map(key => {
          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])}
            </li>
          );
        })}
      </ul>
    );
  }
}

 



#2

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