Fetching Data From An API With An onClick Button Event In React

TODO: Combine these two posts into one (or eliminate one if they are duplicates)

/fetching-data-from-an-api-with-a-button-onclick-event-handler-in-react-2 /fetching-data-from-an-api-with-a-button-onclick-event-handler-in-react

This is how I'm fetching data from a remote API via a button's onClick event handler in React.

Code

<!DOCTYPE HTML>
<html>
<head>
    <title>Fetching Remote Data With A Button Click</title>  
    <script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
</head>
<body>
    <p>Fetching Remote Data With A Button Click</p>
    <div id="root"></div>
    <script type="text/babel">
        function App() {
            const [theStatus, setTheStatus] = React.useState('???')
            const [pageFetchInProgress, setPageFetchInProgress] = React.useState(false)

            React.useEffect(() => {
                if (pageFetchInProgress) {
                    window.fetch('https://api.weather.gov/')
                        .then(response => response.json())
                        .then(response => setTheStatus(response.status))
                    setPageFetchInProgress(false)
                }
            })

            return (
                <div>
                    <div>API Status: {theStatus}</div>
                    <button onClick={() => setPageFetchInProgress(true)}>Check Status</button>
                </div>
            )
        }

        ReactDOM.render(<App/>, document.getElementById('root'))
    </script>
</body>
</html>

Notes:

- This example uses `unpkg.com` to call versions of react and babel to make it stand alone, but the script will function in a regular React app. - The thing that took me the longest to figure out was how to do the trigger itself. I setup a state object that gets updated when the button is pushed which causes a re-render of the component. When that happens, the `useEffect` sees the new state and fires off the fetch. When it's done, it updates the data and returns the state of `pageFetchInProgress` to false. - If the component is re-rendered while "pageFetchInProgress" is false, it doesn't pull the page again. - While the value is true it pulls on every re-render. So, if something else causes a re-render while it was fetching, it would fetch again. You could put in another state variable to watch for this and prevent it from happening.