Recursive tree view in ReactJS

Question

I'm trying to implement a tree view out of a JSON data with ReactJS, I have most of the work done but I have a problem with the expand and collapse buttons. As it is now when clicking one of the subtrees node successfully expands the whole tree, the problem is that according to the component's state (collapsed / expanded) I want to change the icon. Can someone help me?

import React from 'react';
import {IconExpand, IconCollapse} from '../components/Icons';

export default class Tree extends React.Component{
    constructor(props){
        super(props);
        const me = this;
        me.state = {
            visible: true
        };
        me.listItem = null;
        me.isVisible = me.isVisible.bind(me);
    }

    render(){
        const me = this;
        const {visible} = me.state;
        const {jsonData} = me.props;

        let keys = [];
        for (const key in jsonData) {
            if (jsonData.hasOwnProperty(key)) {
                keys.push(key);
            }
        }

        return (
            <ul className="x-tree">
                {keys.map((key, index) => {
                    if(jsonData[key] && typeof jsonData[key] === 'object'){
                        return (
                            <li 
                                className="x-tree-item x-tree-item-node"
                                key={`complex-${key}-${index}`}
                                ref={el => { me.listItem = el; }}
                            >
                                {visible
                                    ? <IconCollapse
                                        className="x-tree-icon"
                                    />
                                    : <IconExpand
                                        className="x-tree-icon"
                                    />
                                }
                                <span
                                    className="x-tree-key"
                                    onClick={me.onClick.bind(me)}
                                >
                                    {key}
                                </span>
                                <Tree
                                    jsonData={jsonData[key]}
                                    expanded={true}
                                />
                            </li>
                        )
                    } else {
                        return (
                            <li 
                                className="x-tree-item"
                                key={`simple-${key}-${index}`}
                            >
                                <span className="x-tree-key">{key}:     </span>
                                <span className="x-tree-value">    {jsonData[key]}</span>
                            </li>
                        )
                    }
                })}
            </ul>
        );
    }

    onClick(event){
        const me = this;
        let node = event.currentTarget;
        let tree = node.nextSibling;
        tree.style.display = tree.style.display === 'none' ? 'block' :     'none';
        me.setState({
            visible: !me.state.visible
        });
        me.isVisible(tree.style.display !== 'none');
    }

    isVisible(key){ 
        return key;
    }
}

Answer 1

some thing like this:

class Tree extends React.Component{
  constructor(props){
      super(props);
      const me = this;
      me.state = {selected: (new Map(): Map<string, boolean>)};
      me.listItem = null;
  }

  render(){
      const me = this;
      const {visible} = me.state;
      const {jsonData} = me.props;

      let keys = [];
      for (const key in jsonData) {
          if (jsonData.hasOwnProperty(key)) {
              keys.push(key);
          }
      }

      return (
          <ul className="x-tree">
              {keys.map((key, index) => {
                  if(jsonData[key] && typeof jsonData[key] === 'object'){
                      return (
                         <li 
                          className="x-tree-item x-tree-item-node"
                          key={`complex-${key}-${index}`}
                          ref={el => { me.listItem = el; }}
                         > 

                          <span
                              className="x-tree-key"
                              onClick={me.onClick.bind(me)}
                              id={key}
                          >
                                {!!me.state.selected.get(key)
                                ? <IconCollapse  
                                    className="x-tree-icon"
                                />
                                : <IconExpand
                                    className="x-tree-icon"
                                />
                            }
                              {key}
                          </span>
                          <Tree
                              jsonData={jsonData[key]}
                              expanded={true}
                          />
                      </li>
                      )
                  } else {
                      return (
                          <li 
                              className="x-tree-item"
                              key={`simple-${key}-${index}`}
                          >
                              <span className="x-tree-key">{key}:     </span>
                              <span className="x-tree-value">    {jsonData[key]}</span>
                          </li>
                      )
                  }
              })}
          </ul>
      );
  }

  onClick(event){
      const me = this;
      let node = event.currentTarget;
      let tree = node.nextSibling;
      console.log(node.id);
      tree.style.display = tree.style.display === 'none' ? 'block' :     'none';
      this.setState((state) => {
        const selected = new Map(state.selected);
        selected.set(node.id, !selected.get(node.id)); // toggle
        return {selected};
      });

  }

}

Answer 2

you should add a state to each node, as it is now the visible state is for the whole tree

all the nodes of the tree component have the same expression

{visible ? <IconCollapse className="x-tree-icon" /> : <IconExpand  className="x-tree-icon" /> }

and in that expression visible will have the same value for each <li> node, so your component has one state visible for all the node in a particular tree level.