Having difficulty constructing the tree hierarchy in a React project

Question

Having difficulty constructing the tree hierarchy in a React project

Trying to implement a tree view in React but struggling with constructing the hierarchical view of information.

Reference: https://www.w3schools.com/howto/howto_js_treeview.asp

Example on CodeSandbox: https://codesandbox.io/s/unruffled-babbage-9knrz?file=/index.js

JSON example (format may vary):

const data = [
  {
    title: "Node 1",
    childNodes: [
      { title: "Childnode 1.1" },
      {
        title: "Childnode 1.2",
        childNodes: [
          {
            title: "Childnode 1.2.1",
            childNodes: [{ title: "Childnode 1.2.1.1" }]
          },
          { title: "Childnode 1.2.2" }
        ]
      }
    ]
  }
];

I have a toggle function for expanding/collapsing tree nodes, but still having difficulty with building the tree in react.

Any guidance would be appreciated.

javascript css reactjs

Answer 1

Answer №1

Start by utilizing <Node/> instead of <Tree/> as the recursive component in your React project.

Avoid using querySelector and classList to modify the state of a component in React.

You can check out my implementation in the code example here

const Tree = () => {
  return (
    <ul>
      {data.map(({ title, childNodes }) => (
        <Node key={title} title={title} childNodes={childNodes} />
      ))}
    </ul>
  );
};

class Node extends React.Component {
  state = {
    isOpen: false
  };
  toggle = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  };
  render() {
    const { title, childNodes } = this.props;
    const { isOpen } = this.state;

    return (
      <li>
        <span className="caret" onClick={this.toggle}>
          {title}
        </span>
        {childNodes && isOpen && (
          <ul>
            {childNodes.map(({ title, childNodes }) => (
              <Node key={title} title={title} childNodes={childNodes} />
            ))}
          </ul>
        )}
      </li>
    );
  }
}

export default Tree

Answer 2

Start by utilizing <Node/> instead of <Tree/> as the recursive component in your React project.

Avoid using querySelector and classList to modify the state of a component in React.

You can check out my implementation in the code example here

const Tree = () => {
  return (
    <ul>
      {data.map(({ title, childNodes }) => (
        <Node key={title} title={title} childNodes={childNodes} />
      ))}
    </ul>
  );
};

class Node extends React.Component {
  state = {
    isOpen: false
  };
  toggle = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  };
  render() {
    const { title, childNodes } = this.props;
    const { isOpen } = this.state;

    return (
      <li>
        <span className="caret" onClick={this.toggle}>
          {title}
        </span>
        {childNodes && isOpen && (
          <ul>
            {childNodes.map(({ title, childNodes }) => (
              <Node key={title} title={title} childNodes={childNodes} />
            ))}
          </ul>
        )}
      </li>
    );
  }
}

export default Tree

Having difficulty constructing the tree hierarchy in a React project

Answer №1

Similar questions

Issues with the functionality of jQuery append and AngularJS ng-if not functioning

What is the advantage of using require() over url/path for displaying images in react native?

Leveraging CSS to automatically number nested sections

Loading images in advance using jCarousel

Can process.env.NODE_ENV be found within Azure App Service?

Using React, implement nested fetch calls to make multiple AJAX requests

Exploring the versatility of Angular by creating various flex layouts with Angular Material cards

Unleashing the potential of an endless animation by incorporating pauses between each iteration

Why is it not possible to return a header in a Typescript function?

One crucial factor to consider when dealing with dual screen setups is the

Implementing a 'click tracking' feature for a toggle button in a React application

Get a file from a distinct internal server than the one where the website is operating

Comparing various object fields to a single input value in JavaScript

Visual Studio Code unable to locate source maps for typescript debugging

Issue with the functionality of Jquery scrolling through thumbnail images animation

Implementing a Searchable Autocomplete Feature within a Popover Component

Arranging Pictures Beside Text Using CSS

eliminate gaps between hyperlinks using cascading style sheets

Is it possible to include a local directory as a dependency in the package.json file

When starting a new project in React, npm can sometimes throw an error stating `'ENOENT: no such file or directory'`