I am a newbie in react and developing applications using react js (front) and express (API backend). Let say I have an organization table fetched over through API. The state network storing the fetched response is shared by both components <EnhancedTable/> and <FullScreenDialog/> rendered by react router

export default function OrganizationTables({nav, setNav}) {
  const {networkName} = useParams();
  const [network, setNetwork] = React.useState(false);
  const networkExists = React.useCallback(async () => {
  let res = await getNetworkExists(networkName);
    if(res.data.network===undefined)
    setNetwork(res.data);
  }, [networkName]);
  React.useEffect(() => {
      networkExists();
  }, [networkExists, key]); 

  return(
    <Routes>
      <Route path='/' element={<EnhancedTable nav={nav} setNav={setNav} network={network} networkName={networkName}/>}/>
      <Route path='/new' element={<FullScreenDialog network={network} setNetwork={setNetwork} />}/>
    </Routes>
)}

The <FullScreenDialog> box is used to create a new organization and when successful it redirects (using react router's useNavigate() function) it to the <EnhancedTable/>. When doing that I want to update the network state again to catch the newly created organization. So on handleSubmit function I do setNetwork(false) just to change network state. But this error pops up and things don't go as planned.

export default function FullScreenDialog({setNetwork}) {
  const navigate = useNavigate();
....
...
 const handleClose = () => navigate(`/superuser/networks/${networkName}/`);
  const handleSubmit = (event) => {
    event.preventDefault();
    setLoading(true);
    const data = new FormData(event.currentTarget);
    createOrganization(
      ...
      // CODE
      ...
      .then(() => {setNetwork(false); handleClose()})
      .catch((e)=> e.response.data.DETAILS? setFormResponseAlert(e.response.data.DETAILS): setFormResponseAlert(`Failed to connect to the server. Check your internet connection`))
    .finally(()=>{
      setTimeout(() => {
        setLoading(false);
        setOpen(true);
      }, 500);
    });
  };
...
}

Can someone help me with this? I tried to put a key in Enhanced Component, well it gave me the same error

0

There are 0 best solutions below