X 버튼 클릭 시, 해당 요소의 id를 인식하지 못하는 에러

• map된 해쉬태그들 각각에 x 아이콘이 붙어있다.
• 해당 해쉬태그들 각각에는 id를 속성으로 부여했다.
• 해당 아이콘을 클릭하면, 속성으로 부여받은 id를 이용하여 백엔드에 삭제 요청을 보낸다.

categories.map((item) => (
                  <div key={item.id}>
                    {item.name}
                    <FontAwesomeIcon
                      icon={faX}
                      color="gray"
                      size="xs"
                      cursor="pointer"
                      params={item.id}
                      onClick={handleDeleteCategory}
                    />
                  </div>
                ))

const handleDeleteCategory = (event) => {
    console.log(event.target.parentElement.getAttribute('params'));
  };

하지만 여기서 문제가 발생했다. 아이콘을 클릭해도, 항상은 아니지만 때떄로 백엔드에 전송할 id가 null로 인식되는 에러가 발생하여 삭제가 정상적으로 진행되지 않았다.

개발자 도구에서 엘리먼트 창을 살펴보니, 아이콘 클릭시 svg 태그가 찍힐 때는 정상적으로 id 값이 인식되지만, 하위에 path 태그가 찍힐 때는 null로 인식되었다. 따라서

categories.map((item) => (
                  <Hasgtag key={item.name}>
                    <span>{item.name}</span>
                    <div params={item.id} onClick={handleDeleteCategory}>
                      <FontAwesomeIcon
                        params={item.id}
                        icon={faX}
                        color="gray"
                        size="xs"
                      />
                    </div>
                  </Hasgtag>
                ))

위와 같이 아이콘 박스를 div 박스로 감싸고, div 박스에 id 값과 클릭 이벤트를 부여했다. 그리고

const handleDeleteCategory = (event) => {
    event.stopPropagation();
    console.log(event.target);
    const params = event.target.getAttribute('params');
    deleteCategory({
      variables: {
        id: Number(params),
      },
    });
  };

div 박스를 클릭했을 때, 이벤트 전파를 막고 쿼리요청을 보내도록 작성하여 해결하였다!