useState & useEffect

src/pages/ExercisesContainer.js

@@ -1,49 +1,37 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import Loading from '../components/Loading'
 import FatalError from './500'
 import Exercises from './Exercises'
 
-class ExercisesContainer extends React.Component {
-
-    state = {
-        data: [],
-        loading: true,
-        error: null
-    }
+const ExercisesContainer = () => {
+    const [ data, setData ] = useState([])
+    const [ loading, setLoading ] = useState(true)
+    const [ error, setError ] = useState(null)
 
-    async componentDidMount(){
-        await this.fetchExercises()
-    }
-
-    fetchExercises = async () => {
-        try {
-            let res = await fetch('http://localhost:8000/api/exercises')
-            let data = await res.json()
-
-            this.setState({
-                data,
-                loading: false
-            })
-
-        } catch (error) {
-            this.setState({
-                loading: false,
-                error
-            })
+    useEffect(() => {
+        const fetchExercises = async () => {
+            try {
+                let res = await fetch('http://localhost:8000/api/exercises')
+                let data = await res.json()
+                setData(data)
+                setLoading(false)
+            } catch (error) {
+                setLoading(false)
+                setError(error)
+            }
         }
-    }
+        fetchExercises()
+    }, [])
 
-    render(){
-        if(this.state.loading)
-            return <Loading />
+    if(loading)
+        return <Loading />
 
-        if(this.state.error)
-            return <FatalError />
+    if(error)
+        return <FatalError />
 
-        return <Exercises
-            data={this.state.data}            
-        />
-    }
+    return <Exercises
+        data={data}            
+    />
 }
 
 export default ExercisesContainer