Example: A directory tree component

test.jsx

// pseudo api
const getDirectories = async () => {
  return [
    { itemName: 'file 1', type: 'file' },
    { itemName: 'folder 1', type: 'directory', nodes: [ { itemName: 'file 1', type: 'file' } ] },
  ]
}

export class TreeNode extends React.Component {
  state = {
    open: false,
  }

  openSubtree = () => this.setState({ open: true })

  closeSubtree = () => this.setState({ open: false })

  render() {
    const { open } = this.state
    const { node } = this.props

    if (node.type === 'file'){
      return <div>{node.itemName}</div>
    }

    if (!open) {
      return <div onClick={this.openSubtree}>{node.itemName}</div>
    }

    return (
      <div>
        <div onClick={this.closeSubtree>{node.itemName}</div>
        {node.nodes.map(node => <TreeNode node={node.nodes} />)}
      </div>
    )
  }
}


export class Tree extends React.Component {
  state = {
    nodes: [],
  }

  async componentDidMount() {
    const nodes = await getDirectories()
    this.setState({ nodes })
  }

  render() {
    return (
      <div>
        {this.state.nodes.map(node => <TreeNode node={node} />)
      </div>
    )
  }
}