I am currently working on implementing a tree structure.
My main goals are to add, delete, edit, and search data within the tree.
However, when I try to push new data into an array, I encounter an error where it says:
TypeError: treeData.push is not a function
I need assistance in storing the data in a new variable before pushing it into the array...
DragandDrop.js:
import React, {
useState,
Component,
useEffect
} from "react";
import 'react-sortable-tree/style.css';
import {
removeNodeAtPath
} from 'react-sortable-tree';
import SortableTree from 'react-sortable-tree';
import {
toggleExpandedForAll
} from 'react-sortable-tree';
import './styles.css'
const Treeview = (props, reset) => {
console.log('props', props)
const initTreeData = [{
title: 'Data_1',
children: [{
title: "Data_2"
}]
},
{
title: 'Data_1'
},
{
title: 'Data_2'
}
]
console.log('test', initTreeData.length)
var test = {
index: initTreeData.length + 1,
title: props.info
}
useEffect(() => {
_fetchGeneral();
}, [])
const [treeData, setTreeData] = useState(initTreeData);
console.log(treeData, "*******")
if (test.title != '') {
var m = treeData.push(test)
// setTreeData(m);
}
const _fetchGeneral = async () => {
setTreeData(initTreeData);
}
const updateTreeData = (e) => {
setTreeData(e);
}
// Expand and collapse code
const expand = (expanded) => {
setTreeData(toggleExpandedForAll({
treeData: treeData,
expanded,
}), );
}
const expandAll = () => {
expand(true);
}
const collapseAll = () => {
expand(false);
}
// Expand and collapse code end
// remove node
const removeNode = (rowInfo) => {
let {
node,
treeIndex,
path
} = rowInfo;
setTreeData(removeNodeAtPath({
treeData: treeData,
path: path, // You can use path from here
getNodeKey: ({
node: TreeNode,
treeIndex: number
}) => {
console.log(number, 'event');
return (number);
},
ignoreCollapsed: false,
}))
}
// remove node end
return (
<
div style={{display: 'flex', flexDirection: 'column', height: '100vh'}}>
<
div style={{flex: '0 0 auto', padding: '0 15px'}}>
<
h3> Full Node Drag Theme</h3>
<
button onClick={expandAll}> Expand All</button>
<
button onClick={collapseAll}> Collapse All</button> &
nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
<
/div>
<
div style={{flex: '1 0 50%', padding: '0 0 0 15px'}}>
<
SortableTree className="tree-dt" id="add_name" treeData={treeData} onChange={updateTreeData}
generateNodeProps={rowInfo => ({
buttons: [
<
div>
<
button label='Delete' onClick={()=> removeNode(rowInfo)}> X< /button> < /
div >,],
style: {height: '50px',}})}
canDrag={({node})=>!node.dragDisabled}
/> < /
div> <
/div>
</div>
</div>
</p>
<p><strong>Add.js File</strong>:</p>
<p><div>
<div>
<pre class="lang-js"><code>import React, {useState} from 'react';
import {TextField} from '@fluentui/react/lib/TextField';
import {DefaultButton, PrimaryButton, Stack, IStackTokens} from '@fluentui/react';
import './styles.css'
const TextFieldBasicExample = (props) => {
const [newItemValue, setNewItemValue] = useState({title: ''});
console.log('onchange', newItemValue);
const handleChange = (e) => {
setNewItemValue({
[e.target.name]: e.target.value,
});
}
const _insert = (event) => {
console.log('onclick', newItemValue);
props.callback(newItemValue);
// setNewItem({
// [event.target.name]:''
// })
}
return (
<
Stack horizontal>
<
Stack className="add-inp">
<
TextField label="Add Item" name="title" onChange={handleChange}/>
<
span id="error_name"></span>
<
PrimaryButton text="Add" className="add-btn" onClick={_insert}/>
<
/Stack>
<
/Stack>
);
};
export default TextFieldBasicExampleapp.js file:
import React, {
useState,
Component,
useEffect
} from "react";
import 'react-sortable-tree/style.css';
import TreeView from "./Drag&Drop";
// import Test from "./Testing";
import AddEdit from "./Add";
import './styles.css'
const Tree = (props) => {
const [info, setInfo] = useState('');
const data = (item) => {
let value = item.title;
setInfo(value);
}
console.log('data', info)
return (<
div>
<
div className="add-dt">
<
div className="left-side">
<
AddEdit callback={data}/>
<
/div>
<
div className="right-side">
<
TreeView info={info}/>
<
/div>
<
/div>
<
/div>
);
}
export default Tree;