Get or save axios.get response to setState realtime when button clicked

Question

I'm working on edit/update function and what I want to do is to save the response of axios.get to setState right after I click the a specific row from the table.

const [dataSystem, setdataSystem] = useState([])
const [systemDetails, setsystemDetails] = ({
   ID: '',
   .....,
})

const getAllSystems = async() => {
  ......
}

const getDependentSystems = async() => { //this is being triggered by a handleselectedSysDep when a row selected
   const response = await axios.get('/API' + ID) //ID is being passed by handleselectedSysDep  from the selected row
   console.log('LIST OF SYSTEM', response.data)
   setdataSystem(response.data)
}

const [selectedSystemID, setselectedSysID] = useState('');
let selectedSysID;
const handleselectedSysDep = (ID, action) => { //will be triggered when a row selected
   setsystemDetails(ID);
   selectedSysID = {...selectedSystemID, 'ID': ID.ID}
   getDependentSystems();
}

useEffect(() => {
   getAllSystems ();
})

What I want is when getDependentSystems() was called, setdataSystem will be populated right away to display the response data of the API since I'm doing edit. Hope you can help me with this.

Here's the result of console.log('LIST OF SYSTEM', response.data)

Thank you

Does your code not work? What is the problem you're having? Where is `ID` defined and how / when does it get assigned a value? — Phil, Aug 24 '21 at 00:11
I updated my codes @Phil, my problem is I can't `setState` realtime the datas I get from API. I need to display it when button click because I'm doing EDIT/UPDATE function. Thank you — JayDee, Aug 24 '21 at 01:46
If I understand you correctly, You want to call `getDependentSystems` when the UPDATE button is clicked? — Micah, Aug 24 '21 at 02:45

Phil · Answer 1 · 2021-08-26T06:12:09.003

1

This looks like a good use-case to use the useEffect hook to watch for changes in systemDetails and execute your getDependentSystems() side-effect.

For example

const [dataSystem, setDataSystem] = useState([])
const [systemDetails, setSystemDetails] = ({
  ID: '',
  //.....,
})

const handleselectedSysDep = (ID, action) => {
  setSystemDetails(ID); // assuming `ID` is an object
}

// Now add an effect to watch for `systemDetails` changes
useEffect(() => {
  if (systemDetails.ID) {
    axios.get(`/API/${systemDetails.ID}`).then(({ data }) => setDataSystem(data))
  }
}, [ systemDetails ]) //  note the dependencies array

You can also use this answer to only fire the useEffect hook after the initial render.

FYI, if you only want getAllSystems() to execute once when your component is mounted, you should use

useEffect(() => {
  getAllSystems()
}, []) //  note the empty array

edited Aug 26 '21 at 06:12

answered Aug 24 '21 at 23:42

Phil

157,677
23
242
245

Tried this @Phil, however upon loading of the table the `useEffect` ran and I have an error upon connecting to API since I don't have yet value for `ID`. What I want is to trigger `axios.get` upon selecting a row on my initial load of table(`getAllSystem`). That's the time when the `getDependentSystems` will be triggered – JayDee Aug 26 '21 at 05:40
@JayDee ah, in that case you can add a condition around the Axios call or use something from [this answer](https://stackoverflow.com/a/55075818/283366) – Phil Aug 26 '21 at 06:11
Sir @Phil, it doesn't solve my issue. Are you having hard time or confused on my issue Sir? Let me know if what's confused you. Thank you in advance – JayDee Aug 26 '21 at 08:20

Get or save axios.get response to setState realtime when button clicked

1 Answers1