diff --git a/pair-programming/README.md b/pair-programming/README.md
index 4cd8f03d8..1d9a97c0a 100644
--- 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
new file mode 100644
index 000000000..d7fe56003
--- /dev/null
+++ b/pair-programming/week-4/passing_props_from_child_to_parent/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+ React + TypeScript + Replit
+
+
+
+
+
+
+
+
+
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
new file mode 100644
index 000000000..00d8a4ca0
--- /dev/null
+++ 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
new file mode 100644
index 000000000..a7f67a2a3
--- /dev/null
+++ 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 (
+
+ {/* 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 */}
+
+ Click Me!
+
+
+ Another Button
+
+
+ );
+};
+
+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
new file mode 100644
index 000000000..4665e4f0b
--- /dev/null
+++ 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
+
+ );
+};
+
+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
new file mode 100644
index 000000000..bc76cb715
--- /dev/null
+++ 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(
+
+
+
+)
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
new file mode 100644
index 000000000..86457a74a
--- /dev/null
+++ 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
new file mode 100644
index 000000000..7972b08f4
--- /dev/null
+++ 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',
+ }
+})