React.js: How do I force a react table to render again after saving? (hooks)

Question

I have a react table using this library react-bootstrap-table-next

I updated its content through saving in database using this code:

/* API for saving profile - version if normalized tables */
  const saveProfile = () => {
    const mapProfileName = selectedModules.map((profileName)=>({profileName:profileName}))
    const mapSelectedModules = selectedModules.map((id)=>({id:id}))
    const mapSelectedActions = selectedActions.map((id)=>({id:id}))
    ProfileMaintenanceService.saveProfile(profileName, mapSelectedModules, mapSelectedActions)
    .then((response) => {
      console.log("ProfileMaintenancePage - saveProfile response.data >>> " , response.data)
      console.log("ProfileMaintenancePage - saveProfile JSON.stringify(response.data) >>> ", JSON.stringify(response.data))
      if(response.data.success === "Success"){
        setShowSuccessModal(true);
        setShowFailedModal(false);
      }
    }).catch((err) => {
      console.log("ProfileMaintenancePage - saveProfile catch err.response.data>>> ", err.response.data.error)
        setProfileSaveFailedModalMessage(err.response.data.error)
        setShowSuccessModal(false);
        setShowFailedModal(true);
    })
  };

I have success in saving. However, the table does not reflect the changes right away.

Should I use useEffect? How can I call useEffect given this scenario. I'm sorry React is really confusing at start.

TIA

Does this answer your question? [React - How can I force render a function component?](https://stackoverflow.com/questions/46240647/react-how-can-i-force-render-a-function-component) — keikai, Apr 07 '20 at 11:03

score 1 · Accepted Answer · answered Apr 07 '20 at 11:07

You can again call get table request:

const saveProfile = () => {
    const mapProfileName = selectedModules.map((profileName)=>({profileName:profileName}))
    const mapSelectedModules = selectedModules.map((id)=>({id:id}))
    const mapSelectedActions = selectedActions.map((id)=>({id:id}))
    ProfileMaintenanceService.saveProfile(profileName, mapSelectedModules, mapSelectedActions)
    .then((response) => {
      console.log("ProfileMaintenancePage - saveProfile response.data >>> " , response.data)
      console.log("ProfileMaintenancePage - saveProfile JSON.stringify(response.data) >>> ", JSON.stringify(response.data))
      if(response.data.success === "Success"){
        setShowSuccessModal(true);
        setShowFailedModal(false);
      }
     // like this use ur own function
    return ProfileMaintenanceService.getProfiles()
    }).then((response) => {
    // there should get data from response and set to table
   }).catch((err) => {
      console.log("ProfileMaintenancePage - saveProfile catch err.response.data>>> ", err.response.data.error)
        setProfileSaveFailedModalMessage(err.response.data.error)
        setShowSuccessModal(false);
        setShowFailedModal(true);
    })
  };

Amazing! This now works perfectly. Just needed to request again and set to table. Thank you — iamjpcbau, Apr 07 '20 at 11:21

React.js: How do I force a react table to render again after saving? (hooks)

1 Answers1