Lab 8: More Reusable Components

Objectives

• Create another reusable component
• Render the reusable component

---

Steps

Create another reusable component

1. Create the file src\projects\ProjectCard.tsx.

2. Implement a ProjectCard as a function (not class) component that meets the following specifications:

   1. Takes a project object as a prop.

      Note: If using TypeScript you will need to create an interface to define the properties that come into the component.

   2. Cut the <div className="card">...</div> from the ProjectList component and use it as the JSX for the ProjectCard component.
   3. Add a function to format the description to 60 characters and call it when rendering the description.

   src\projects\ProjectCard.tsx

   import { Project } from './Project';
   import React from 'react';
   
   function formatDescription(description: string): string {
     return description.substring(0, 60) + '...';
   }
   
   interface ProjectCardProps {
     project: Project;
   }
   
   function ProjectCard(props: ProjectCardProps) {
     const { project } = props;
     return (
       <div className="card">
         <img src={project.imageUrl} alt={project.name} />
         <section className="section dark">
           <h5 className="strong">
             <strong>{project.name}</strong>
           </h5>
           <p>{formatDescription(project.description)}</p>
           <p>Budget : {project.budget.toLocaleString()}</p>
         </section>
       </div>
     );
   }
   
   export default ProjectCard;

Render the reusable component

1. Open the file src\projects\ProjectList.tsx.

2. Render the ProjectCard component passing it the project as a prop.

   src\projects\ProjectList.tsx

   import React from 'react';
   import { Project } from './Project';
   + import ProjectCard from './ProjectCard';
   
   interface ProjectListProps {
     projects: Project[];
   }
   
   function ProjectList ({ projects }: ProjectListProps) {
       const items = projects.map(project => (
         <div key={project.id} className="cols-sm">
   -      <div className="card">
   -      <img src={project.imageUrl} alt={project.name} />
   -       <section className="section dark">
   -         <h5 className="strong">
   -           <strong>{project.name}</strong>
   -         </h5>
   -         <p>{project.description}</p>
   -        <p>Budget : {project.budget.toLocaleString()}</p>
   -       </section>
   -     </div>
   +      <ProjectCard project={project}></ProjectCard>
         </div>
       ));
       return <div className="row">{items}</div>;
   
   }
   
   export default ProjectList;

3. Verify the project data displays correctly (it should still look the same as it did in the last lab except for the ... after the description) in the browser.

   

---

✔ You have completed Lab 8