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]);
    }