Collapsible treeview using react

[user543820]

I am trying to make a collapsible treeview using react such that when a particular checkbox is checked/unchecked, all the child nodes expand/collapse. I would appreciate some help hiding the child nodes in the tree. I don't understand where to insert the 'isibility attribute I have here. Here's my code.

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

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

  render() {
    var visibility;
    if (!this.state.visible) {
      visibility = {display: "none"};
    }
    var node = this.props.data;
    return (
      <ul>
        {Object.keys(this.props.data).map(key => {
          return (
            <li key={key}> <input type="checkbox" onClick={this.toggle} /> <label>{key}</label> :
              {typeof node[key] === "object" ? (<Treeview data={node[key]}/>) : (node[key])}

          );
        })}
      </ul>
    );
  }
}