How can I get the ID of an element in React?

Question

i have problems with getting current element ID.

Here's my code:

<path
          onClick={(e) => setSelected(e.target.id)}
          fill={this.element.id == selected ? "#f00000" : "#bfbfbf"}
          fill-rule="nonzero"
          stroke="#808080"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-miterlimit="4"
          stroke-dashoffset="0"
          id="path4636"/>

UPDATE: It's about 96 elements, not single one

Answer 1

You can use React Ref to get your DOM element ID.

Here you have code snippet:

...
constructor() {
super();
this.ref= React.createRef();
}

render() {
 return (
  <div>
    <h1
      onClick={() => {
        console.log(this.textInput.current.id);
      }}
    >
      click me
    </h1>
    <path id="id1" ref={this.textInput} />
  </div>
);
}
...

https://codepen.io/mivchal/pen/vYpPzBW

Answer 2

Use element ref:

import React, { useRef, useState } from "react";

const PathExample = () => {
  const [selected, setSelected] = useState();
  const pathRef = useRef();

  return (
    <svg
      width="100%"
      height="auto"
      viewBox="0 0 71 49"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M10.4113 0.541169L7.7192 3.23717C7.47085 3.48588 7.47085 3.88912 7.7192 4.13783L12.631 9.05681C12.8793 9.30552 13.282 9.30551 13.5303 9.05681L16.2224 6.3608C16.4707 6.11209 16.4707 5.70886 16.2224 5.46015L11.3106 0.541169C11.0623 0.292461 10.6596 0.292461 10.4113 0.541169Z"
        onClick={(e) => setSelected(e.target.id)}
        fill={selected === pathRef?.current?.id ? "#f00000" : "#bfbfbf"}
        fillRule="nonzero"
        stroke="#808080"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeMiterlimit="4"
        strokeDashoffset="0"
        id="path4636"
        ref={pathRef}
      />
    </svg>
  );
};

export default PathExample;

Answer 3

For an unlimited number of paths:

import React, { useEffect, useRef, useState } from "react";

const PathExample = () => {
  const [selectedItems, setSelectedItems] = useState([]);
  const svgRef = useRef();

  const toggleSelected = (id) => {
    let newSelectedItems = [...selectedItems];
    if (newSelectedItems.includes(id)) {
      newSelectedItems.splice(newSelectedItems.indexOf(id), 1);
    } else {
      newSelectedItems.push(id);
    }
    setSelectedItems(newSelectedItems);
  };

  useEffect(() => {
    const paths = svgRef.current.querySelectorAll("path");
    paths.forEach((path) => {
      if (selectedItems.includes(path.id)) {
        path.setAttribute("fill", "#f00000");
      } else {
        path.setAttribute("fill", "#bfbfbf");
      }
    });
  }, [selectedItems]);

  return (
    <svg
      width="100%"
      height="100%"
      viewBox="0 0 71 49"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      ref={svgRef}
    >
      <path
        d="M10.4113 0.541169L7.7192 3.23717C7.47085 3.48588 7.47085 3.88912 7.7192 4.13783L12.631 9.05681C12.8793 9.30552 13.282 9.30551 13.5303 9.05681L16.2224 6.3608C16.4707 6.11209 16.4707 5.70886 16.2224 5.46015L11.3106 0.541169C11.0623 0.292461 10.6596 0.292461 10.4113 0.541169Z"
        onClick={(e) => toggleSelected(e.target.id)}
        fill="#bfbfbf"
        id="path1"
      />
      <path
        d="M10.4113 0.541169L7.7192 3.23717C7.47085 3.48588 7.47085 3.88912 7.7192 4.13783L12.631 9.05681C12.8793 9.30552 13.282 9.30551 13.5303 9.05681L16.2224 6.3608C16.4707 6.11209 16.4707 5.70886 16.2224 5.46015L11.3106 0.541169C11.0623 0.292461 10.6596 0.292461 10.4113 0.541169Z"
        onClick={(e) => toggleSelected(e.target.id)}
        transform="translate(-7,-7)"
        fill="#bfbfbf"
        id="path2"
      />
      <path
        d="M10.4113 0.541169L7.7192 3.23717C7.47085 3.48588 7.47085 3.88912 7.7192 4.13783L12.631 9.05681C12.8793 9.30552 13.282 9.30551 13.5303 9.05681L16.2224 6.3608C16.4707 6.11209 16.4707 5.70886 16.2224 5.46015L11.3106 0.541169C11.0623 0.292461 10.6596 0.292461 10.4113 0.541169Z"
        onClick={(e) => toggleSelected(e.target.id)}
        transform="translate(7,7)"
        fill="#bfbfbf"
        id="path3"
      />
    </svg>
  );
};

export default PathExample;

Check CodePen: https://codepen.io/marcinbzone/pen/WNdmPaj