[리액트] 사이드 메뉴에서 클릭된 메뉴에 (id? 와)매핑 되는 subject를 출력시키고 싶습니다

Question

SideMenuItems 객체의 id값과 매칭되는 submenu의 subject를 출력하고싶은데현재 id와 매칭되는 모든 subject 값이 전부 다 나옵니다sideMenuId 때문인거 같은데 잘모르겠습니다[SideMenuItems .js] 입니다/ 사이드바 메뉴 구성 / // 제조업 export const SideMenuItems = [ { // MyPage(gCode: "1") id: 1, gCode: 1, title: '기초정보', cName: 'side-parent', submenu: [ { title: '거래처등록', cName: 'sidebar-item', path: '/erp/sclient-Register', subject: '거래처리스트', }, { title: '창고등록', cName: 'sidebar-item', path: '/erp/Warehouse-Register', subject: '창고등록리스트', }, { title: '품목등록', cName: 'sidebar-item', path: '/erp/Item-Register', subject: '품목등록리스트', }, ], } ][FrameBody.js] 입니다import React from 'react'; import { SideMenuItems } from '../MenuItems'; import { Link } from "react-router-dom"; export default function FrameBody({sideMenuId = 1}) { const itemSubject = SideMenuItems.filter((item) =>item && item.id === sideMenuId)[0].submenu return ( <>

{itemSubject.map((item, index) => { return ( {item.subject} ) })}

... 이하 생략 ... ); }현재 모습니다[main.js] 입니다import React from 'react'; import LNB from './LNB'; import Sidebar from './Sudebar'; export default function Main() { const [sideMenuId, setSideMenuId] = useState(-1); --- 이하 생략 --- return (

); } [Sudebar.js]입니다import React, { useEffect, useState } from 'react'; import SidebarItem from './SidebarItem'; import { SideMenuItems } from './MenuItems'; export default function Sudebar({ sideMenuId = 1 }) { const [sideMenuItems, setSideMenuItems] = useState([]); useEffect(() => { setSideMenuItems( SideMenuItems.filter((item) => item?.gCode === sideMenuId), ); }, [sideMenuId]); return (

{sideMenuItems.map((item, index) => ( ))}

); }

[리액트] 사이드 메뉴에서 클릭된 메뉴에 (id? 와)매핑 되는 subject를 출력시키고 싶습니다

0개의 답변

#subject 목록