React Tree Component with Filter
One of the most important ways to display multilevel data is to use the Tree component. If there are so many levels and the user does not know how much each level contains, it is not pleasant for them. A better solution is to apply a filter on this Tree to have a better UX.
In this post, we are supposed to teach a filtered tree-component with the help of React and Material-UI. Now, we will explain the implementation levels step by step.
First, create a React project with the following command.
yarn create-react-app filter-treeThen install Material-UI:
yarn add @material-ui/core @material-ui/lab @material-ui/iconsNow, according to this link, you can create a TreeView component, which TreeItem is created based on children and recursive function.
Creation of MyTreeView Component
First, create a folder called component in the src folder and create the
MyTreeView.js file and copy the following code into it.
The MyTreeView component has five inputs:
- JSON data is the input for building a tree.
- Expanded is an array of treeItems that has been opened.
- Selected is an input whose value is stored in a state after clicking on each
treeItem. - HandleToggle is a function for when an item is expanded/collapsed.
- HandleSelect is a function for when an item is selected/unselected.
The structure of the tree input is given below. We want to examine two formats of input JSON. The important point is that a name or an id must be considered for each item.
1. JSON structure with children format:
If each item has children, the same recursive routine will continue.
2. JSON structure with flat format:
With the ancestor field, you can find out which Children item is another item. If an ancestor is equal to zero, it means a root.
Note that we use the type of controlled components.
In most cases, we recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
Creation of a TreeFilter Component
If we want to look at this component in the form of a black-box, you can filter
the items of this tree with an input and a tree by sending data to it. In the component folder, create a file called TreeFilter.js and copy the following
code into it.
In this component, we have used TextField and by typing in it, the MyTreeView component will be filtered. To filter the Tree, we used the interesting idea of thereact-treebeard component, which we have used its sample code of Filter.js.
These tools are in the util folder of our project.
Lines 14 to 16 display when the TreeFilter input data is transferred to
setSubjectData.
If there is an input in the onFilterMouseUp function, the tree is first filtered and then the items that need to be expanded are assigned to the filtered variable. This value must be transferred to setSubjectData (lines 28 to 36) and if there is no value, the first data must be assigned to setSubjectData. When the handleToggle function is called, the id value of that treeItem must be assigned to setExpanded.
The handleSelect function is also used when the user clicks and the value is
transferred to the setSelectedSingleItem. Note that if the multiSelect value in
TreeView is true, nodeIds contains an array of ids, and if multiSelect value is
false, a value of id is transferred to nodeIds.
The Use of TreeFilter Component
Now we want to use this component in two ways.
- With the help of put JSON structure mentioned above, first, create a file called SimpleTree.js in the src path and copy the following code into it. The sampleData variable is the same input JSON.
2. First, this data must be converted to the input structure of MyTreeView. To
convert it, this link has been used, which listToTreeSubject.js has the same
function. Now in the src folder, create a file called FlatListToTree.js and copy
the following code in it:
There is a complete project on Github.
Tip
If a related error similar to findDOMNode is deprecated in StrictMode is
appeared, remove <React.StrictMode> from the App.js file.
<React.StrictMode><App /></React.StrictMode>-------to -----------<App />
