react how to unselect on second click and not on third-CodePudding

Learning React 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={ toggleSiteCheckmark.extendDetails
          ? filteredGraphData
          : visualGraph}
        />

Enlish is not my mother language, could be mistakes.

CodePudding user response：

I believe this is because you need to reset the filters back to their original state when currentCam is null/falsey. See the else block.


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((oldState) => ({
          ...oldState,
          extendDetails: !oldState.extendDetails,
        }));
      };
       filterCamera();
    } else {
       setToggleSiteCheckmark(intialState)
       setFilteredGraphData("")
    }
  }, [currentCam]);

What is happening is that now when the user unselects the cam, the effect run, but this time time currentCam is null. This means it goes into the else block and the state items are set back to their initial values. This means the logic on the next try works properly as everything is reset.