Lab 7: Displaying List Data

Objectives

  • Format the list data as list items
  • Format the list data as cards

Steps

Format the list data as list items

  1. Modify src\projects\ProjectList.tsx to format the project information into a HTML unordered list.

    <ul>
    <li>Project Name 1</li>
    <li>Project Name 2</li>
    </ul>

    Be sure to set a key for each list item.

src\projects\ProjectList.tsx

...
function ProjectList({ projects }: ProjectListProps) {
- return <pre>{JSON.stringify(projects, null, ' ')}</pre>;
+ return (
+ <ul className="row">
+ {projects.map((project) => (
+ <li key={project.id}>{project.name}</li>
+ ))}
+ </ul>
+ );
}
export default ProjectList;
  1. Verify the project names display in the browser (they may overlap at this point).

Format the list data as cards

  1. Update src\projects\ProjectList.tsx to format the project information into a rows of cards that show additional project information using the HTML template below.

    <div class="cols-sm">
    <div class="card">
    <img src="project image url" alt="project name" />
    <section class="section dark">
    <h5 class="strong">
    <strong>project name</strong>
    </h5>
    <p>project description</p>
    <p>Budget : project budget</p>
    </section>
    </div>
    </div>

    Remember that you will need to replace attribute class with className and change html attributes from src="project image url" to src={project.imageUrl}.

    TIP: Visual Studio Code has an extension HTML to JSX to do the attribute conversion.

    src\projects\ProjectList.tsx

    ...
    function ProjectList({ projects }: ProjectListProps) {
    - return (
    - <ul className="row">
    - {projects.map((project) => (
    - <li key={project.id}>{project.name}</li>
    - ))}
    - </ul>
    - );
    }
    export default ProjectList;
    ...
    function ProjectList({ projects }: ProjectListProps) {
    + return (
    + <div className="row">
    + {projects.map((project) => (
    + <div key={project.id} className="cols-sm">
    + <div className="card">
    + <img src={project.imageUrl} alt={project.name} />
    + <section className="section dark">
    + <h5 className="strong">
    + <strong>{project.name}</strong>
    + </h5>
    + <p>{project.description}</p>
    + <p>Budget : {project.budget.toLocaleString()}</p>
    + </section>
    + </div>
    + </div>
    + ))}
    + </div>
    + );
    }
    export default ProjectList;

  2. Verify the project data displays correctly in the browser.

    image


Note you can use toLocaleString to format the project budget number in JavaScript.

<p>Budget : {project.budget.toLocaleString()}</p>

If you need to format something in React, ask yourself or google.com: How would I do this in JavaScript?

✔ You have completed Lab 7

Edit this page