Bootcamp
Search…
7.ICE.1: Product Rendering

Introduction

Render an array of objects using JSX.

Setup

  1. 1.
  2. 2.
    Follow the instructions in Module 7.1: JSX Intro to set up Webpack for React.
  3. 3.
    Copy the contents of this JSON file into index.jsx. Conversely, you can also make a module for this data if you want.
    1. 1.
      This means copying the data and pasting it into a new data.json file
    2. 2.
      In your index.jsx file, import the data with import data from './data.json'

Base

Render the data in the array onto the screen. The HTML should look like this: (R_emember to add the 'key' attribute for your mapped element!)_
<ul>
<li>
<p>id: 1</p>
<p>name: Car</p>
<p>description: The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design</p>
<p>created: 2020-12-28T09:02:15.112Z</p>
<p>updated: 2020-12-28T09:02:15.112Z</p>
</li>
[...]
</ul>

Comfortable

  1. 1.
    Install Moment.js and format the dates to time from now.​
  2. 2.
    Use CSS so that the background colour of the items alternate between white and grey.