Own TreeStructure in React - RenderTree

Question

I'm trying to make a tree structure in react. I use redux to hold data. I'am trying render this render tree by method 'renderTree' but I do something wrong

Here is my code:

import React, { Component } from 'react'
import {treeActions} from '../_actions'
import { connect } from 'react-redux';

class TreePage extends Component {

    componentDidMount() {
        this.props.getTree()

    }

    renderTree(parentId) {
        const nodes = this.items && this.items.filter(x => x.parentNodeId == parentId);
        <ul>
            {nodes && nodes.map((item) => {
                <li>{item.name}</li>

                item.subNodes && this.renderTree(item.NodeId)
            })}
        </ul>
    }

    render() {
        const {items} = this.props.tree;
        this.items = items 

        return(
            <React.Fragment>
                <h1>Hello World!</h1>
                {this.renderTree()}
            </React.Fragment>
        )
    }
}
function mapState(state){


    return state;
}
const actionCreators = {
    getTree: treeActions.getTree
}

const connectedApp = connect(mapState, actionCreators)(TreePage)
export {connectedApp as TreePage}

And here is the photo of items:

And here is the message from console

./src/TreePage/TreePage.js
  Line 14:9:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 16:17:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.

What could be the problem?

Answer 1

The rendering can be simplified a bit, since the "root" of the tree in your case is already an array of nodes, and every node always as a subNodes property, which is always an array. Using the parentId can be avoided completely, since we're rendering from the root and always follow the subNodes.

import React, { Component } from 'react';

const tree = [
  {
    name: 'node1',
    subNodes: [
      {
        name: 'node1-1',
        subNodes: [],
      },
      {
        name: 'node1-2',
        subNodes: [],
      },
    ],
  },
  {
    name: 'node2',
    subNodes: [],
  },
  {
    name: 'node3',
    subNodes: [
      {
        name: 'node3-1',
        subNodes: [
          {
            name: 'node3-1-1',
            subNodes: [],
          },
          {
            name: 'node3-1-2',
            subNodes: [],
          },
        ],
      },
      {
        name: 'node3-2',
        subNodes: [],
      }
    ],
  },
];

class Tree extends Component {

  renderSubNodes(subNodes) {
    return (
      <ul>
        {subNodes.map((node) => (
          <li>
              {node.name}
              {this.renderSubNodes(node.subNodes)}
          </li>
        ))}
      </ul>
    );
  }

  render() {
    return(
      <React.Fragment>
        <h1>Hello World!</h1>
        {this.renderSubNodes(tree)}
      </React.Fragment>
    )
  }
}

export default Tree;

Answer 2

The issue is that you haven't returned your JSX from within the renderTree function.

 renderTree(parentId) {
        const nodes = this.items && this.items.filter(x => x.parentNodeId == parentId);
        return (<ul>
            {nodes && nodes.map((item) => { 
              return (
                <React.Fragment> 
                   <li>{item.name}</li>
                   {item.subNodes && this.renderTree(item.NodeId)}
                </React.Fragment>
              )
            })}
        </ul>
       )
    }