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.

---

✔ You have completed Lab 6