Как вывести компоненты в react по сравнению?

Question

изучаю реакт и хотел бы помощи у вас попросить...

Имею два div (navbar) и в одном div имею ссылки с data-slug,а в другом div имею блоки, которые тоже привязаны к data-slug. Суть в том, что я хочу сделать сравнение эти data-slug и вывести блоки, которые между собой одинаково названы. На данный момент у меня активны 3 блока сразу и...вывод в общем - статичный. Хотелось бы понять, как это делается (если можно, то с примерами).

function SubItems(props) {
    
    return (
    <div className={`${styles.header__nav_item} ${props.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/">
                            Общие сведения
                        </a>
                    </div>
                    <div className={styles.header__submenu_list_item}>
                        <a className={styles.header__submenu_list_link} href="/ministerstvo/o-ministerstve/obschie-svedeniya/">
                            Общие сведения
                        </a>
                    </div>
                    <div className={styles.header__submenu_list_item}>
                        <a className={styles.header__submenu_list_link} href="/ministerstvo/o-ministerstve/obschie-svedeniya/">
                            Общие сведения
                        </a>
                    </div>
                    <div className={styles.header__submenu_list_item}>
                        <a className={styles.header__submenu_list_link} href="/ministerstvo/o-ministerstve/obschie-svedeniya/">
                            Общие сведения
                        </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 = {props.url} data-slug = {`${"slug-"}${props.slug}`} >
                {props.title}
            </a>
        </div>
    );

} export default NavItem;

import styles from './Nav.module.scss';
import NavItem from "./navItems";
import React, { useState, useEffect } from 'react';
import SubItems from './SubItems';
import userEvent from '@testing-library/user-event';


function Navigation(props) {

    const [hovered, setHovered] = useState(false);

    const toggleHover = () => setHovered(!hovered);
    const Slug =
        [
            { title: "Министерство", dataSlug: "ministerstvo", url: 'yandex.ru',subtitle: "O министерстве " },
            { title: "Документы", dataSlug: "documenty", url: 'mail.ru', subtitle: "О документах" },
            { title: "Прочее", dataSlug: "prochee", url: 'google.ru', subtitle: "О прочее" }
        ]

    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;

upd: Это то, как на данный момент происходит вывод SubItems, все 3 блока активны.А нужен лишь один блок, который относится к data-slug

БЛОГ НА HUSL

Как вывести компоненты в react по сравнению?

Ответы (0 шт):