React beginner (learning by coding), here i have different cameras, these cameras get active when button is clicked like button 1 (camera 1), button 2 (camera 2), when i click one of those buttons then starts filtering which then shows filtered version in < graph>, i have graph where my filteredGraphData affects, when button is clicked it filters, but then when same button is clicked second time it should unfilter or unselect but it does not, it only does it for some reason when i click same button third time. Any idea why it unfilters/unselects it in third click and not in second click ? I have been stuck with this for few hours now
import { Graph } from "react-d3-graph";
const intialState = {
extendDetails: false,
};
const visualGraph = useSelector((state: RootStateOrAny) => state.graph.graph
);
const currentCam = useSelector((state: RootStateOrAny) => state.currentCam
);
const [filteredGraphData, setFilteredGraphData] = useState<any>("");
const [toggleSiteCheckmark, setToggleSiteCheckmark] = useState(intialState);
useEffect(() => {
if (currentCam ) {
const filterCamera = () => {
let nodes = nodes.filter(
(x: any) => x.camera == currentCam.identifier
);
let links = links.filter((x: any) =>
nodes?.map((y: any) => y.id).includes(x.source)
);
let sourceNodess = nodes.filter((x: any) =>
links.map((y: any) => y.target).includes(x.id)
);
let allNodes = nodes?.concat(sourceNodess);
setFilteredGraphData(
toggleSiteCheckmark.extendDetails == false
? { links: links, nodes: allNodes }
: visualGraph
);
setToggleSiteCheckmark({
...toggleSiteCheckmark,
extendDetails: !toggleSiteCheckmark.extendDetails,
});
};
filterCamera();
}
}, [currentCam]);
console.log("filteredgraphdata", toggleSiteCheckmark.extendDetails);
<Graph
data={filteredGraphData || visualGraph}
/>