i have got error to push new data to array

Question

I am doing to take tree structure.

I need to add data and want to delete, edit, and search

When I push new data into an array before that data stored a new var in that data at that time I have got one error

TypeError: treeData.push is not a function

How to set that data into a new var and how to push an 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> ); } export default Treeview;

Add.js File :

 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 TextFieldBasicExample

app.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" > <`enter code here` AddEdit callback = { data } /> < /div> < div className = "right-side" > < TreeView info = { info } /> < /div> < /div> < /div> ); } export default Tree;

Answer 1

I am assuming you are facing issue with this code snippet:

    if (test.title != '') {
    var m = treeData.push(test)
    // setTreeData(m);
    }

so you can do it like this:

if (test.title != '') {
    setTreeData([...treeData, test]);
    }

Answer 2

try useState<string[]>(defaultValues) or useState([])