Skip to main content

Lab 6: Passing Data to a Component


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


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.


    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.


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

    function ProjectsPage() {
    return (
    - <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