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.js

   export class Project {
     constructor(initializer) {
       this.id = undefined;
       this.name = '';
       this.description = '';
       this.imageUrl = '';
       this.contractTypeId = null;
       this.contractSignedOn = new Date();
       this.budget = 0;
       this.isActive = false;
   
       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;
     }
   
     isNew() {
       return this.id === undefined;
     }
   }

src\projects\MockProjects.js

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.jsx.

2. Use JSON.stringify() to output the MOCK_PROJECTS array from MockProjects.js 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 Fragement <></>.
   • 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.

   
   

3. Verify the projects data is displayed as shown below.

   

   tip

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

   src\projects\ProjectsPage.jsx

   + 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