У меня есть элемент sidemenu
. В нем есть несколько пунктов. Как определить на какой из них кликнули? Пробовал так:
const handleClick = (e) => {
const { nodeName, textContent } = e.target;
setnewScroll(parseInt(nodeName.id, 0, 0))
console.log(`clicked at ${nodeName.id}`)
}
return (
<div key={"side-menu"} className="side-menu" onClick={handleClick}>
{
SideMenuItems.map((dataItem) => { return (<SideMenuItem key={"sideMenu".concat(dataItem.id)} title={dataItem.title} text_id={dataItem.text_id} className="side__menu-item"></SideMenuItem>)
})
}
</div>
)
Но при клике на SideMenuItem не выводится console.log. Как правильно сделать так, чтобы при клике на item запускался handleClick?
Вот SideMenuItem, если нужно:
import React, { useRef } from 'react'
import { Link } from 'react-scroll'
import "./sidemenuItemLink.scss"
export default function SideMenuItem({ text_id, id, title }) {
return (
<Link key={id} activeClass='side__menu-item--active' spy={true} hashSpy={true} smooth={true} to={text_id} className="side__menu-item">
<div className='menu__item-box'><p className='menu__item-text'>{title}</p></div>
</Link>
)
}
return ( div key={"s
— тут тег не открыт, по идее должны были быть ошибкиSideMenuItem
прокинутьhandleClick
, чтобы в негоid
элемента передавался?(event)=>handleClick(id)