From cbbfc39c4f80889453ba3db5e98c57336d45c896 Mon Sep 17 00:00:00 2001
From: Rodrigo Pedroso <>
Date: Mon, 24 Jun 2019 00:19:11 -0400
Subject: [PATCH] Passing props to child and parent

---
 src/components/Team.jsx | 6 ++++--
 src/views/Home.jsx      | 9 +++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index 73b9054..dff65c5 100644
--- a/src/components/Team.jsx
+++ b/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>
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index 7213bc6..43528e0 100644
--- a/src/views/Home.jsx
+++ b/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>) : (