Passing props to child and parent

src/components/Team.jsx

@@ -1,12 +1,14 @@
 import React from 'react'
 
-export default function Team({ teams }) {
+export default function Team({ teams, select }) {
 	return (
 		<div className='teams'>
 			<ul className='list'>
 				{teams.map(team => (
 					<li className = 'list-item' key={team.id}>
-						{ team.name }
+						<button onClick={() => select(team.name)}>
+							{ team.name }
+						</button>
 					</li>
 				))}
 			</ul>

src/views/Home.jsx

@@ -33,6 +33,12 @@ export default function Home() {
 		fetchData()
 	}, [])
 
+	// MARK: Callbacks
+
+	let select = (selected) => {
+		console.log('Selected ' + selected)
+	}
+
 	// MARK: - Load teams' details
 	useEffect(() => {
 		teams.map(team => {
@@ -41,7 +47,6 @@ export default function Home() {
 					setLoadingDetails(true)
 					let result = await axios(config.api + '/team/' + team.id)
 					if (result.data) {
-						console.log(JSON.stringify(result.data))
 						setTeamDetails(t => [...t, result.data])
 					}
 					setLoadingDetails(false)
@@ -63,7 +68,7 @@ export default function Home() {
 
 			{loading ? (<div>Loading...</div>) : (
 				teams !== undefined &&
-				<Team teams={ teams } />
+				<Team teams={teams} select={select} />
 			)}
 
 			{loadingDetails ? (<div>Loading...</div>) : (