Skip to main content

Lab 8: More Reusable Components


  • Create another reusable component
  • Render the reusable component


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.


    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={} />
    <section className="section dark">
    <h5 className="strong">
    <p>Budget : {project.budget.toLocaleString()}</p>

    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.


    import React from 'react';
    import { Project } from './Project';
    + import ProjectCard from './ProjectCard';

    interface ProjectListProps {
    projects: Project[];

    function ProjectList ({ projects }: ProjectListProps) {
    const items = => (
    <div key={} className="cols-sm">
    - <div className="card">
    - <img src={project.imageUrl} alt={} />
    - <section className="section dark">
    - <h5 className="strong">
    - <strong>{}</strong>
    - </h5>
    - <p>{project.description}</p>
    - <p>Budget : {project.budget.toLocaleString()}</p>
    - </section>
    - </div>
    + <ProjectCard project={project}></ProjectCard>
    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