react에서 동일한 형태 메뉴 버튼이 여러개 있을때 이벤트 리슨하는 방법

Question

메뉴 바에 동일한 메뉴 버튼이 여러개 있는데,
클릭할 때 클릭한 메뉴 아래에 선을 만들고 싶습니다.
그런데 아래와 같이 코드를 넣으니 모든 메뉴 아래에 선이 생깁니다.
어떻게 해결 가능할까요?

const [menuUnderbar, setMenuUnderbar] = useState(false);
  const underbarToggle = (e) => {
    setMenuUnderbar(true);
  };
....
                <MenuButton
                  onClick={underbarToggle}
                  className={menuUnderbar === true ? selected : null}
                >

손정현 · Answer

안녕하세요!

혹시 menuUnderBar가 상위 컴포넌트에 위치해야하는 이유가 따로 있을까요?

없다면, MenuButton 컴포넌트 안에서 각자의 상태를 가지고 있는 방법으로 해결할 수 있을것 같습니다.