Untitled

import React, { useState, useEffect } from 'react'
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'

const NewLevel = () => {

    const [data, setData] = useState([]);
    const [primary, setPrimary] = useState('0');

    const structure = { 'name': 'nuevo', 'sub': [] }

    let array = [

        {
            'name': 'cat1', 'sub': [
                {
                    'name': 'subcat1_1', 'sub': [
                        { 'name': 'subsubcat1_1_1', 'sub': [] },
                        { 'name': 'subsubcat1_1_2', 'sub': [] },
                        { 'name': 'subsubcat1_1_3', 'sub': [] }
                    ]
                },
                { 'name': 'subcat1_2', 'sub': [] }
            ]
        }
        ,

        { 'name': 'cat2', 'sub': [] }

    ]

    const handleAdd = (i) => {
        let myData = [...data];
        myData.push(structure);
        setData(myData);
    }

    const handleLook = (e) => {
        console.log(primary)
        //console.log(i)
        //i.sub.push(structure);
        //let index = array.findIndex((item) => item.sub == i);
        //console.log(index)
        //console.log(array.indexOf(i))
    }

    const Items = ({ items }) => {
        var number = 0;

        return (
            Array.isArray(items) && items.length ?
                <ul>
                    {items.map((n, i) => (
                        <li>
                            <h2>{n.name} - <span
                                key={number}
                                onClick={() => handleLook(number)}>
                                Add New
                            </span>
                            </h2>
                            <Items items={n.sub} />
                            {number++}
                        </li>
                    ))}
                </ul> : null
        )
    }

    let array_2 = [{ 'name': 'cat 1', 'sub': [] }]

    const adittion = { 'name': 'enter item', 'sub': [] }

    return (
        <div className='mt-5'>
            <Button
            onClick={() => handleAdd()}
            >
                Agregar
            </Button>

            <Items items={array} />


        </div>
    )
}

export default NewLevel