Techtonica · daaimah123 · Aug 7, 2025 · Aug 7, 2025 · Aug 7, 2025 · Aug 7, 2025
diff --git a/pair-programming/README.md b/pair-programming/README.md
@@ -30,7 +30,7 @@ This directory contains the pair programming session contents separated by week,
 - [Mini OOP Project](/pair-programming/week-4/mini-project-OOP)
 - [Add your Name to a "Hello" React Component](/pair-programming/week-4/hello-component)
 - [React Buttons Pt 1: Working with Props](/pair-programming/week-4/react-props)
-- React Buttons Pt 2: Passing Child to Parent
+- [React Buttons Pt 2: Passing Child to Parent](/pair-programming/week-4/passing_props_from_child_to_parent)
 
 ## Week 5
 

diff --git a/pair-programming/week-4/passing_props_from_child_to_parent/index.html b/pair-programming/week-4/passing_props_from_child_to_parent/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React + TypeScript + Replit</title>
+  </head>
+  <body>
+    <div id="root">
+    </div>
+    <script type="module" src="/src/index.jsx"></script>
+    <!-- TODO: insert script file name -->
+    <script src="<insert-script-file-with-extension>" theme="dark" position="bottom-right"></script>
+  </body>
+</html>
diff --git a/pair-programming/week-4/passing_props_from_child_to_parent/package.json b/pair-programming/week-4/passing_props_from_child_to_parent/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "passing-props-child-to-parent",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "React Buttons Pt 2: Passing Child to Parent",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0"
+  }
+}
diff --git a/pair-programming/week-4/passing_props_from_child_to_parent/src/App.jsx b/pair-programming/week-4/passing_props_from_child_to_parent/src/App.jsx
@@ -0,0 +1,29 @@
+import React, {useState} from 'react';
+import ColorButton from './ColorButton';
+
+// EXERCISE: React Buttons Pt 2: Passing Child to Parent
+const App = () => {
+
+  // Create a state and setState with a default message value
+
+  // Update this code with a new function named "updateMessage" that will take in a message-parameter and update your setState by passing the same message-parameter; note the message-parameter is different from the message state
+  const handleClick = () => {
+    alert('you clicked a button')
+  };
+
+ return (
+    <div>
+      {/* Add a p tag with your default message state */}
+
+      {/* replace your onClick with your new function and set its value with the new function name */}
+      <ColorButton color="blue" onClick={handleClick}>
+        Click Me!
+      </ColorButton>
+      <ColorButton color="green" onClick={handleClick}>
+        Another Button
+      </ColorButton>
+    </div>
+ );
+};
+
+export default App;
diff --git a/pair-programming/week-4/passing_props_from_child_to_parent/src/ColorButton.jsx b/pair-programming/week-4/passing_props_from_child_to_parent/src/ColorButton.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+// replace your onClick with your new function name
+const ColorButton = ({ children, color, onClick}) => {
+ return (
+   // replace the onClick value with an arrow function () => that calls your new function with a new message string
+    <button style={{ backgroundColor: color }} onClick={onClick}>
+      {children}
+    </button>
+ );
+};
+
+export default ColorButton;
diff --git a/pair-programming/week-4/passing_props_from_child_to_parent/src/index.jsx b/pair-programming/week-4/passing_props_from_child_to_parent/src/index.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>
+)
diff --git a/pair-programming/week-4/passing_props_from_child_to_parent/tsconfig.json b/pair-programming/week-4/passing_props_from_child_to_parent/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}
diff --git a/pair-programming/week-4/passing_props_from_child_to_parent/vite.config.js b/pair-programming/week-4/passing_props_from_child_to_parent/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+  }
+})