Exercises.js

import React, { useState, useEffect } from 'react';

import Welcome from '../Components/Welcome';
import ExcerciseList from '../Components/ExcerciseList';
import AddButton from '../Components/AddButton';

const Exercises = props => {
	const [state, setState] = useState({
		data: []
	});

	useEffect(() => {
		const abortController = new AbortController();

		async function fetchData() {
			let res = await fetch('http://localhost:4000/api/exercises');
			let data = await res.json();

			setState({
				data
			});
		}

		fetchData();

		return function cleanUp() {
			abortController.abort();
		};
	}, []);

	return (
		<div className='container'>
			<Welcome username='Josh' />
			<ExcerciseList exercises={state.data} />
			<AddButton />
		</div>
	);
};

export default Exercises;