The latest articles on Forem by sdalal (@sdalal). https://forem.com/sdalal https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F847091%2Fec48ff5d-8d4f-4977-b96c-54bbf0df35c5.png https://forem.com/sdalal en sdalal Thu, 14 Apr 2022 00:05:34 +0000 https://forem.com/sdalal/react-help-on-link-click-how-to-expand-all-and-collapse-all-tree-nodes-using-react-54pp https://forem.com/sdalal/react-help-on-link-click-how-to-expand-all-and-collapse-all-tree-nodes-using-react-54pp <p>I generate a tree from xml file using react. I have two links Expand All and Collapse All. How to expand all tree nodes if tree is in Collapse Mode when Expand All link will click? How to Collapse all tree nodes if tree is in Expand Mode when Collapse All link will be clicked?<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>App.js import React, { Component } from 'react'; import { Switch, Route, Link } from "react-router-dom"; import { BrowserRouter } from 'react-router-dom'; import Home from './Home'; export class App extends Component { constructor(props) { super(props); } render() { return ( &lt;BrowserRouter&gt; &lt;Switch&gt; {/* Otherwise, render the Landing component */} &lt;Route component={Home} /&gt; &lt;/Switch&gt; &lt;/BrowserRouter&gt; ); } } export default App; ------------------------------- Home.js import React, { Component } from 'react'; import ProductsTree from './ProductsTreeView'; class Home extends React.Component { constructor(props) { super(props); this.state = { currentNode: {}, }; this.setCurrentNode = this.setCurrentNode.bind(this); } setCurrentNode(node) { this.setState({ currentNode: node }); } render() { return ( &lt;div&gt; &lt;table width="100%" border="0" cellSpacing="0" cellPadding="0"&gt; &lt;tbody&gt; &lt;tr width="100%"&gt; &lt;td align="left" nowrap="true"&gt; &lt;b&gt;&lt;a href=’’&gt;Expand All&lt;/a&gt;&lt;/b&gt; &lt;b&gt;&lt;a href=’’&gt;Collapse All&lt;/a&gt;&lt;/b&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;br /&gt; &lt;ProductsTree setCurrentNode={this.setCurrentNode} /&gt; &lt;/div&gt; ); } } export default Home; ------------------------------- ProductsTreeView.js import React, { Component } from 'react'; import axios from 'axios'; import XMLParser from 'react-xml-parser'; import tree from './tree.xml' class ProductsTreeView extends Component { render() { return ( &lt;div id="TreeView"&gt; &lt;TreeView setCurrentNode={this.props.setCurrentNode} /&gt; &lt;/div&gt; ); } } class Node { description = 'n/a'; id = -1; key_id = -1; linkpagename = ''; isActive = false; nodes = []; constructor(description, id, key_id, linkpagename) { this.description = description; this.id = id; this.key_id = key_id; this.linkpagename = linkpagename; } static nodesFromXml(xml) { const map = (entity, nodes) =&gt; { const id = entity.attributes['id']; const key_id = entity.attributes['key-id']; const descriptionText = entity.children[ entity.children.findIndex((child) =&gt; child.name === 'description') ].value; const entities = entity.children.filter( (child) =&gt; child.name === 'entity' ); var linkPageName = entity.attributes['link-page-name']; const node = new Node(descriptionText, id, key_id, linkPageName); nodes.push(node); entities.forEach((entity) =&gt; map(entity, node.nodes)); }; const parsedData = new XMLParser().parseFromString(xml); const entities = parsedData.children.filter( (child) =&gt; child.name === 'entity' ); const nodes = []; entities.forEach((entity) =&gt; map(entity, nodes)); return nodes; } } class TreeView extends React.Component { constructor(props) { super(props); this.state = { nodes: [] }; this.toggleNode = this.toggleNode.bind(this); } componentDidMount() { axios .get(tree, { 'Content-Type': 'application/xml; charset=utf-8' }) .then((response) =&gt; this.setState({ nodes: Node.nodesFromXml(response.data) }) ); } render() { const nodes = this.state.nodes; return ( &lt;ul&gt; {nodes.map((node) =&gt; ( &lt;TreeNode id={node.id} key={node.key_id} node={node} onToggle={this.toggleNode} setCurrentNode={this.props.setCurrentNode} /&gt; ))} &lt;/ul&gt; ); } toggleNode(node) { if (node.nodes.length === 0) return; this.props.setCurrentNode(node); function _toggleNode(currentNode, node) { if (currentNode.id === node.id) { currentNode.isActive = !currentNode.isActive; } else { currentNode.nodes.forEach((childNode) =&gt; _toggleNode(childNode, node)); } } const nodes = this.state.nodes; nodes.forEach((currentNode) =&gt; _toggleNode(currentNode, node)); this.setState((state) =&gt; (state.nodes = nodes)); } } class TreeNode extends React.Component { render() { const node = this.props.node; const onToggle = this.props.onToggle; let acitveChildren = null; if (node.isActive &amp;&amp; node.nodes.length &gt; 0) { acitveChildren = ( &lt;ul&gt; {node.nodes.map((node) =&gt; ( &lt;TreeNode id={node.id} key={node.key_id} node={node} onToggle={onToggle} /&gt; ))} &lt;/ul&gt; ); } return ( &lt;li id={node.id} linkpagename={node.linkpagename} key={node.key_id} onClick={(event) =&gt; { event.stopPropagation(); onToggle(node); }} &gt; {node.description} - {node.key_id} - {node.linkpagename} {acitveChildren} &lt;/li&gt; ); } } export default ProductsTreeView; --------------------------------------- tree.xml &lt;?xml version="1.0" standalone="yes"?&gt; &lt;tree&gt; &lt;entity id="e11" key-id="1" link-page-name="Add_Item"&gt; &lt;description&gt;Service&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e248" key-id="48" link-page-name="Add_SubItem"&gt; &lt;description&gt;A_test1_test1&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e3717" key-id="717" link-page-name="Edit_SubItem"&gt; &lt;description&gt;A_SubItem1&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e45546" key-id="5546" link-page-name="Edit_ItemTemplate"&gt; &lt;description&gt;A_Test_Template&lt;/description&gt; &lt;image&gt;images/paper.gif&lt;/image&gt; &lt;imageOpen&gt;images/paper.gif&lt;/imageOpen&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;entity id="e21" key-id="1" link-page-name="Add_SubItem"&gt; &lt;description&gt;Checking&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e3606" key-id="606" link-page-name="Edit_SubItem"&gt; &lt;description&gt;Categories&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e45112" key-id="5112" link-page-name="Edit_ItemTemplate"&gt; &lt;description&gt;All states&lt;/description&gt; &lt;image&gt;images/paper.gif&lt;/image&gt; &lt;imageOpen&gt;images/paper.gif&lt;/imageOpen&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;entity id="e3382" key-id="382" link-page-name="Edit_SubItem"&gt; &lt;description&gt;Advan&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e43157" key-id="3157" link-page-name="Edit_ItemTemplate"&gt; &lt;description&gt;States&lt;/description&gt; &lt;image&gt;images/paper.gif&lt;/image&gt; &lt;imageOpen&gt;images/paper.gif&lt;/imageOpen&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;entity id="e247" key-id="47" link-page-name="Add_SubItem"&gt; &lt;description&gt;A_test6&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e3716" key-id="716" link-page-name="Edit_SubItem"&gt; &lt;description&gt;A_Item&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e45545" key-id="5545" link-page-name="Edit_ItemTemplate"&gt; &lt;description&gt;temp1&lt;/description&gt; &lt;image&gt;images/paper.gif&lt;/image&gt; &lt;imageOpen&gt;images/paper.gif&lt;/imageOpen&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;entity id="e12" key-id="2" link-page-name="Add_Item"&gt; &lt;description&gt;Sales&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e230" key-id="30" link-page-name="Add_SubItem"&gt; &lt;description&gt;Gift Cards&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e3421" key-id="421" link-page-name="Edit_SubItem"&gt; &lt;description&gt;Sample Card&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e43308" key-id="3308" link-page-name="Edit_ItemTemplate"&gt; &lt;description&gt;greeting temp&lt;/description&gt; &lt;image&gt;images/paper.gif&lt;/image&gt; &lt;imageOpen&gt;images/paper.gif&lt;/imageOpen&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;entity id="e3422" key-id="422" link-page-name="Edit_SubItem"&gt; &lt;description&gt;De Card&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e43309" key-id="3309" link-page-name="Edit_ItemTemplate"&gt; &lt;description&gt;NS Temp&lt;/description&gt; &lt;image&gt;images/paper.gif&lt;/image&gt; &lt;imageOpen&gt;images/paper.gif&lt;/imageOpen&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;entity id="e215" key-id="15" link-page-name="Add_SubItem"&gt; &lt;description&gt;Chck&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e3671" key-id="671" link-page-name="Edit_SubItem"&gt; &lt;description&gt;Add item&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e45438" key-id="5438" link-page-name="Edit_ItemTemplate"&gt; &lt;description&gt;Ahhhh&lt;/description&gt; &lt;image&gt;images/paper.gif&lt;/image&gt; &lt;imageOpen&gt;images/paper.gif&lt;/imageOpen&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;entity id="e3450" key-id="450" link-page-name="Edit_SubItem"&gt; &lt;description&gt;Advtttt&lt;/description&gt; &lt;image&gt;images/plus.gif&lt;/image&gt; &lt;imageNode&gt;images/de.gif&lt;/imageNode&gt; &lt;imageOpen&gt;images/minus.gif&lt;/imageOpen&gt; &lt;entity id="e43577" key-id="3577" link-page-name="Edit_ItemTemplate"&gt; &lt;description&gt;gggggg&lt;/description&gt; &lt;image&gt;images/paper.gif&lt;/image&gt; &lt;imageOpen&gt;images/paper.gif&lt;/imageOpen&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;/entity&gt; &lt;/tree&gt; </code></pre> </div> react