How to generate a treeview from .xml and .xsl file using react.js?

Question

Hi I am converting asp.net webform to asp.net core and react.js. Currently webpage displays data in the tree format using tree.xml tree.xsl and tree.js. I am new to react.js. Please help me in generating treeview in react.js from using .xml .xsl and .javascript files attached in the zip. .aspx code Tree looks like the below picture Sales Item1 SubItem1 ITEM2 SubItem2 Item3 SubItem3 Supervisor Item1 SubItem1 Item2 SubItem2 Item3 SubItem3 Thanks

Vaibhav Chauhan · Answer

In React JS you can use already developed components. which can be installed as npm package. Run below command in Node command prompt to install it : npm install react-sortable-tree --save Below is the example how you can use the react-Sortable-tree in reactJS import React { Component } from 'react' ; import SortableTree from 'react-sortable-tree' ; import 'react-sortable-tree/style.css' ; // This only needs to be imported once in your app export default class Tree extends Component { constructor(props) { super (props); this .state = { treeData: [ { title: 'Chicken'  children: [{ title: 'Egg' }] } { title: 'Fish'  children: [{ title: 'fingerline' }] } ] }; } render() { return ( treeData={ this .state.treeData} onChange={treeData => this .setState({ treeData })} /> ); } }

saradalal · Answer

Not able to understand. PLease help how to generate tree in react.js from xml xsl and javascript.

Vaibhav Chauhan · Answer

You can use react-sortable-tree npm package create tree view. You just need to install the packagearrange your data in required format and pass that data in SortableTree component. https://www.npmjs.com/package/react-sortable-tree