Home>

I study the reaction and would like to help you ask ...

I have two div (navbar) and in one DIV I have links from Data-Slug, and in another DIV I have blocks that are also tied to Data-Slug. The bottom line is that I want to make a comparison of these Data-Slug and bring blocks that are subject to each other. At the moment, I have 3 blocks at once and ... the output in general is static. I would like to understand how this is done (if possible, then with examples).

Function Subitems (Props) {
    Return (
    ≪
Div Classname= {`$ {styles.header__nav_item} $ {propp .hover? 'header__submenu_inner_active': ''} `} Data-Slug= {` $ {"Slug -"} $ {props.slug} `} >
        ≪
div classname= {styles.header__submenu_col} >
            ≪
div classname= {styles.header__submenu_item} >
                ≪
div classname= {styles.header__submenu_title} >
                    ≪
Div >
{Props.Subtitle} <
/div >
                ≪
/div >
                ≪
div classname= {styles.header__submenu_list} >
                    ≪
div classname= {styles.header__submenu_list_item} >
                        ≪
a classname= {styles.header__submenu_list_link} href= "/ministerstvo /o-ministerstve /obschie-svedeniya /" >
                            General
                        ≪
/a >
                    ≪
/div >
                    ≪
div classname= {styles.header__submenu_list_item} >
                        ≪
a classname= {styles.header__submenu_list_link} href= "/ministerstvo /o-ministerstve /obschie-svedeniya /" >
                            General
                        ≪
/a >
                    ≪
/div >
                    ≪
div classname= {styles.header__submenu_list_item} >
                        ≪
a classname= {styles.header__submenu_list_link} href= "/ministerstvo /o-ministerstve /obschie-svedeniya /" >
                            General
                        ≪
/a >
                    ≪
/div >
                    ≪
div classname= {styles.header__submenu_list_item} >
                        ≪
a classname= {styles.header__submenu_list_link} href= "/ministerstvo /o-ministerstve /obschie-svedeniya /" >
                            General
                        ≪
/a >
                    ≪
/div >
                ≪
/div >
            ≪
/div >
        ≪
/div >
    ≪
/div >
    );
} Export Default Subitems; 
Function NaviTem (Props) {
    const [hovered, sethovered]= USESTATE (FALSE);
    const togglehover= ()= >
 Sethovered (! hovered);
    Return (
        ≪
Div Classname= {`$ {styles.header__nav_item} $ {hovered? `$ {styles.header__nav_item_active}`: ''} `} OnmouseEnter= {ToggleHover} Onmouseleave= {ToggleHover} >
            ≪
a classname= {styles.header__nav_link} href= {pros.url} data-slug= {`$ {" Slug -"} $ {props.slug}`} >
                {Pros.title}
            ≪
/a >
        ≪
/div >
    );
} Export Default NaviTem; 
import styles from './nav.Module.scss';
Import NaviTem from "./navitems";
Import React, {Ussestate, UseEFFECT} from 'React';
Import Subithems from './Subitems';
Import UseRevent from '@ Testing-Library /User-Event';
FUNCTION NAVIGATION (PROPS) {
    const [hovered, sethovered]= USESTATE (FALSE);
    const togglehover= ()= >
 Sethovered (! hovered);
    Const Slug=.
        [
            {title: "Ministry", Dataslug: "MinisterStvo", url: 'yandex.ru', subtitle: "o ministry"},
            {title: "Documents", Dataslug: "Documenty", URL: 'Mail.Ru', subtitle: "About documents"},{title: "Other", Dataslug: "Prochee", url: 'google.ru', subtitle: "Other"}]
    Return (
        ≪
Div Classname= {`$ {styles.header} $ {hovered? `$ {styles.header_is_submenu}`: ''} `} OnmouseEnter= {ToggleHover} Onmouseleave= {ToggleHover} >
            ≪
div classname= {styles.header__nav} >
                ≪
div classname= {styles.wrapper} >
                    ≪
div classname= {styles.header__nav_inner} >
                        ≪
div classname= {styles.header__nav_list} >
                            {Slug.map ((Item)= >
                                ≪
Navitem.
                                    title= {item.title}
                                    Slug= {item.dataslug}
                                    url= {item.url}
                                    hovered= {hovered}
                                /≫
                            )}
                        ≪
/div >
                    ≪
/div >
                ≪
/div >
            ≪
/div >
            ≪
div classname= {styles.header__subnav} >
                ≪
div classname= {styles.header__submenu} >
                    ≪
div classname= {styles.wrapper} >
                        {Slug.map ((Block)= >
                            ≪
Subitems.
                                subtitle= {block.subtitle}
                                Slug= {block.dataslug}
                                hovered= {hovered}
                            /≫
                        )}
                    ≪
/div >
                ≪
/div >
            ≪
/div >
        ≪
/div >
    );
}
EXPORT DEFAULT NAVIGATION; 

It is not entirely clear what needs to be done. There are blocks that you need to compare?, What to bring? Block a.b.c block D.E.F, what should be the result?

Konstantin Modin2021-09-15 01:33:11

When you hover on , the block should be displayed, and at the moment they are displayed 3 blocks.

TOMMYCH.BTW2021-09-15 01:33:11