Skip to main content

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';

    function ProjectList ({ projects }) {
    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.

    image


You have completed Lab 8