create state with dynamic property

i use react js in my project.in my project i have two lvl menu and when mouse enter event occured sub menu showed and when mouse leave event occured sub menu disappear.my problem is when mouse enter event occure on a li all of sub menues appear.and thats because i have just one state.i don't know how can i create a dynamic state.i have mainMenu array that store all menu and sub menu in that and this is absolutely dynamic.(in my example length of my array is 2 but this can be changed) i have a boolean state (isMenuOpen).when it is true sub menu appear and when its false sub menu disappear.i want when mouse enter event occure on a li just appear submenu that related to that li.

this is my App.js

import "./index.css";
import './App.css';
import Sub from "./Sub";
import React, {useState} from "react";

export default function App() {

    const mainMenuArr = [
        {
            id: "1",
            name: "All Products",
            url: "#",
            items: [
                {
                    id: "1-1",
                    name: "our gifts",
                    url: ""
                },
                {
                    id: "1-2",
                    name: "note book",
                    url: ""
                },
                {
                    id: "1-3",
                    name: "calender",
                    url: ""
                }
            ]
        }, {
            id: "2",
            name: "Business Card",
            url: "#",
            items: [
                {
                    id: "2-1",
                    name: "triangle",
                    url: ""
                },
                {
                    id: "2-2",
                    name: "square",
                    url: ""
                },
                {
                    id: "2-3",
                    name: "circle",
                    url: ""
                },
                {
                    id: "2-4",
                    name: "rectangle",
                    url: ""
                },
            ]
        }
    ]

    const [isMenuOpen, setIsMenuOpen] = useState(false);

    const openSubMenu = () => {
        setIsMenuOpen(true);
    }
    const closeMenu = () => {
        setIsMenuOpen(false);
    }

    const mainMenu = mainMenuArr.map(main => {
        return (
            <li onMouseEnter={openSubMenu} onMouseLeave={closeMenu} key={main.id} id={main.id} className='main__item'>
                {main.name}
                <Sub isOpen={isMenuOpen} subItems={main.items}/>
            </li>
        );
    })
    return (
        <div className="container">
            <ul className="main__items">
                {mainMenu}
            </ul>


        </div>
    );
}

this is my App.css

.container{
  background-color: #eee;
  height: 40px;
}
.main__items{
  display: flex;
  position: relative;
}
.main__item{
  margin: 0 20px;
  cursor: pointer;
}

this is my Sub.js

import React from 'react';
import PropTypes from 'prop-types';
import './Sub.css';

const Sub = props => {
    const subArr = props.subItems.map(item => {
        return (
            <li key={item.id} id={item.id} className='sub__item'>
                {item.name}
            </li>
        );
    });

    return (
        <>
            {props.isOpen ?
                <ul className='sub__items'>
                    {subArr}
                </ul>
                : null
            }
        </>
    );
};

Sub.propTypes = {};

export default Sub;

and this is my Sub.css

.sub__items{
    position: absolute;
    top: 40px;
    background-color: bisque;
}
.sub__item{
    margin: 10px;
}

I would be very grateful if anyone could help me

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW