Skip to main content

Lab 6: Passing Data to a Component

Objectives

  • Create a reusable list component
  • Pass data into a component property

Steps

Create a reusable list component

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

  2. Implement a ProjectList function component that meets the following specifications:

    1. Takes a projects array as a prop.

      You will need to create an interface to define the properties that come into the component.

    2. Displays the projects array as a JSON string.

    src\projects\ProjectList.tsx

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

    interface ProjectListProps {
    projects: Project[];
    }

    function ProjectList({ projects }: ProjectListProps) {
    return <pre>{JSON.stringify(projects, null, ' ')}</pre>;
    }

    export default ProjectList;

Pass data into a component property

  1. Modify src\projects\ProjectsPage.tsx to render the ProjectList component and pass it the MOCK_PROJECTS array instead of directly displaying the data.

    src\projects\ProjectsPage.tsx

    import React from 'react';
    import { MOCK_PROJECTS } from './MockProjects';
    + import ProjectList from './ProjectList';

    function ProjectsPage() {
    return (
    <>
    <h1>Projects</h1>
    - <pre>{JSON.stringify(MOCK_PROJECTS, null, ' ')}</pre>
    + <ProjectList projects={MOCK_PROJECTS} />
    </>
    );
    }

    export default ProjectsPage;

  2. Verify the application is displaying the projects as it was in the last lab. image


You have completed Lab 6