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
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>
);
}
...
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;
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