Refresh data on button click react

Question

I tried to build a refresh button to refresh my react-table data, here is my code

const [data, setData] = useState([]);
const [loadingData, setLoadingData] = useState(true);
const [refreshData, setRefreshData] = useState(false);

const getData = async ()=>{
 const response = await axios.get('http://localhost:5000/in-data')
 setData(response.data)
 setLoadingData(false);
}

useEffect(()=>{
 getData()
},[refreshData])

Here is the button

<button
  className="button"
  type="button"
  onClick={setRefreshData(!RefreshData)}         
>
  Refresh
</button>

The result is Error: Infinite Looping, reach the maximum number of re-render. Anyone know how to do it in the proper way?

David · Accepted Answer · 2021-11-22 17:06:54Z

4

This is executing the function immediately, not on button click:

onClick={setRefreshData(!RefreshData)}

The result of the function would then be set as the click handler, but since that result is causing a re-render then that point is moot.

You want to pass a function reference as the click handler, not the execution of a function (unless that execution returns the function reference you want, of course). Something like this:

onClick={() => setRefreshData(!RefreshData)}

answered Nov 22, 2021 at 17:06

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rnewd_user · Accepted Answer · 2021-11-22 17:19:51Z

1

can you try please putting your function inside of useEffect

useEffect(()=>{
const getData = async ()=>{
 const response = await axios.get('http://localhost:5000/in-data')
 setData(response.data)
 setLoadingData(false);
}
if(refreshData){
   getData()
}
},[refreshData])

click on button

onClick={() => setRefreshData(!RefreshData)}

edited Nov 22, 2021 at 17:19

answered Nov 22, 2021 at 17:02

rnewd_user

1,72215 silver badges17 bronze badges

Comments

Code-Apprentice · Accepted Answer · 2021-11-24 16:24:12Z

1

I assume that clicking the "refresh" button is supposed to reload the data for the page. So you should do that! In other words, instead of your current approach, you should add a click handler to the button that cals getData() to fetch the data. refreshData and setRefreshData() aren't needed:

<button
  className="button"
  type="button"
  onClick={getData}         
>

edited Nov 24, 2021 at 16:24

answered Nov 22, 2021 at 17:11

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

Collectives™ on Stack Overflow

Refresh data on button click react

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related