Passing props via router

src/views/Team.jsx

@@ -0,0 +1,58 @@
+// MARK: Definitions
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import config from '../config.json'
+import FilterForm from '../components/FilterForm.jsx'
+
+export default function User({ teamId }) {
+	// MARK: State
+	let [loading, setLoading] = useState(true)
+	let [team, setTeam] = useState([])
+	let [filteredTeams, setFilteredTeams] = useState([])
+
+	// MARK: Effect
+	// MARK: - Load user info from Tempo backend on initialization
+	useEffect(() => {
+		let fetchData = async() => {
+			setLoading(true)
+			try {
+				let result = await axios(config.api + '/team/2')
+				if (result.data) {
+					setTeam(result.data)
+				}
+				setLoading(false)
+			}
+			catch(err) {
+				setLoading(false)
+				console.log('Fetch data error: ' + err)
+			}
+		}
+
+		fetchData()
+	}, [teamId])
+
+	// MARK: Callbacks
+	// let filterCallback = (e) => {
+	// 	let filtered = teams.filter(team => {
+	// 		return team.name.toUpperCase().includes(e.target.value.toUpperCase())
+	// 	})
+
+	// 	setFilteredTeams(filtered)
+	// }
+
+	// MARK: Return
+	return (
+		<div className='user'>
+			<h1>Team</h1>
+
+			{teamId !== undefined &&
+				<p>{teamId}</p>
+			}
+
+			{loading ? (<div>Loading...</div>) : (
+				team !== undefined &&	
+				<h2>{team.name}</h2>
+			)}
+		</div>
+	)
+}