Props and Project Component

15Dkatz · Oct 19, 2022 · 15aa9bf · 15aa9bf
1 parent 60b3665
commit 15aa9bf
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/portfolio/src/Projects.js b/portfolio/src/Projects.js
@@ -1,6 +1,21 @@
 import React, { Component } from 'react';
 import PROJECTS from './data/projects';
 
+class Project extends Component {
+  render() {
+    const { title, image, description, link } = this.props.project;
+
+    return (
+      <div style={{ display: 'inline-block', width: 300, margin: 10 }}>
+        <h3>{title}</h3>
+        <img src={image} alt='profile' style={{ width: 200, height: 120 }} />
+        <p>{description}</p>
+        <a href={link}>{link}</a>
+      </div>
+    );
+  }
+}
+
 class Projects extends Component {
   render() {
     return (
@@ -10,7 +25,7 @@ class Projects extends Component {
           {
             PROJECTS.map(PROJECT => {
               return (
-                <div key={PROJECT.id}>{PROJECT.title}</div>
+                <Project key={PROJECT.id} project={PROJECT} />
               );
             })
           }
@@ -20,4 +35,4 @@ class Projects extends Component {
   }
 }
 
-export default Projects;
+export default Projects;