Skip to main content

Lab 5: Data

Objectives

  • Add data
  • Display the data

Steps

Add data

  1. Create two files to be the model and the data and fill in the code as shown below.

    src\projects\Project.ts

    export class Project {
    id: number | undefined;
    name: string = '';
    description: string = '';
    imageUrl: string = '';
    contractTypeId: number | undefined;
    contractSignedOn: Date = new Date();
    budget: number = 0;
    isActive: boolean = false;
    get isNew(): boolean {
    return this.id === undefined;
    }

    constructor(initializer?: any) {
    if (!initializer) return;
    if (initializer.id) this.id = initializer.id;
    if (initializer.name) this.name = initializer.name;
    if (initializer.description) this.description = initializer.description;
    if (initializer.imageUrl) this.imageUrl = initializer.imageUrl;
    if (initializer.contractTypeId)
    this.contractTypeId = initializer.contractTypeId;
    if (initializer.contractSignedOn)
    this.contractSignedOn = new Date(initializer.contractSignedOn);
    if (initializer.budget) this.budget = initializer.budget;
    if (initializer.isActive) this.isActive = initializer.isActive;
    }
    }

    src\projects\MockProjects.ts

    import { Project } from './Project';

    export const MOCK_PROJECTS = [
    new Project({
    id: 1,
    name: 'Johnson - Kutch',
    description:
    'Fully-configurable intermediate framework. Ullam occaecati libero laudantium nihil voluptas omnis.',
    imageUrl: '/assets/placeimg_500_300_arch4.jpg',
    contractTypeId: 3,
    contractSignedOn: '2013-08-04T22:39:41.473Z',
    budget: 54637,
    isActive: false,
    }),
    new Project({
    id: 2,
    name: 'Wisozk Group',
    description:
    'Centralized interactive application. Exercitationem nulla ut ipsam vero quasi enim quos doloribus voluptatibus.',
    imageUrl: '/assets/placeimg_500_300_arch1.jpg',
    contractTypeId: 4,
    contractSignedOn: '2012-08-06T21:21:31.419Z',
    budget: 91638,
    isActive: true,
    }),
    new Project({
    id: 3,
    name: 'Denesik LLC',
    description:
    'Re-contextualized dynamic moratorium. Aut nulla soluta numquam qui dolor architecto et facere dolores.',
    imageUrl: '/assets/placeimg_500_300_arch12.jpg',
    contractTypeId: 6,
    contractSignedOn: '2016-06-26T18:24:01.706Z',
    budget: 29729,
    isActive: true,
    }),
    new Project({
    id: 4,
    name: 'Purdy, Keeling and Smitham',
    description:
    'Innovative 6th generation model. Perferendis libero qui iusto et ullam cum sint molestias vel.',
    imageUrl: '/assets/placeimg_500_300_arch5.jpg',
    contractTypeId: 4,
    contractSignedOn: '2013-05-26T01:10:42.344Z',
    budget: 45660,
    isActive: true,
    }),
    new Project({
    id: 5,
    name: 'Kreiger - Waelchi',
    description:
    'Managed logistical migration. Qui quod praesentium accusamus eos hic non error modi et.',
    imageUrl: '/assets/placeimg_500_300_arch12.jpg',
    contractTypeId: 2,
    contractSignedOn: '2009-12-18T21:46:47.944Z',
    budget: 81188,
    isActive: true,
    }),
    new Project({
    id: 6,
    name: 'Lesch - Waelchi',
    description:
    'Profound mobile project. Rem consequatur laborum explicabo sint odit et illo voluptas expedita.',
    imageUrl: '/assets/placeimg_500_300_arch1.jpg',
    contractTypeId: 3,
    contractSignedOn: '2016-09-23T21:27:25.035Z',
    budget: 53407,
    isActive: false,
    }),
    ];

Display the data

  1. Open the file src\projects\ProjectsPage.tsx.

  2. Use JSON.stringify() to output the MOCK_PROJECTS array from MockProjects.ts in the component.

    TIPS:

    • React components can only return one root element so you will need to wrap the <h1> and <pre> tags in a React Fragment <></>.
    • Wrapping output in a HTML <pre></pre> (pre-formatted) tag retains whitespace.
    • To switch to JavaScript in JSX use { }
    • JSON.stringify(MOCK_PROJECTS, null, ' ')'s third argument is used to insert white space into the output JSON string for readability purposes. The second argument is a replacer function so we can pass null because we don't need to replace anything.
  1. Verify the projects data is displayed as shown below.

    image

    tip

    The solution to step 3 is shown below but try to get it on your own first.

    src\projects\ProjectsPage.tsx

    + import { MOCK_PROJECTS } from './MockProjects';

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

    export default ProjectsPage;

You have completed Lab 5