JSFiddle - React, Tailwind, and code Playground

by Joshua Koudys

HTML

<header></header>

JavaScript

const basketEntry = ({
  price,
  quantity,
  name
}) => `
  <li>
    <strong>${price}</strong> ${name} [${quantity}]
  </li>
`;

const shopCart = ({
  items,
  user: {
    name
  }
}) => `
  <section class="cart">
    <h1>Welcome, ${name}!</h1>
    <ul>
      ${items.map(basketEntry).join('')}
    </ul>
  </section>
`;

document.querySelector('header').innerHTML = shopCart({
  user: {
    name: 'OoDRLoO'
  },
  items: [{
    name: 'pants',
    quantity: 5,
    price: '$600'
  }, {
    name: 'shirt',
    quantity: 2,
    price: '$30'
  }, {
    name: 'hat',
    quantity: 1,
    price: '$20'
  }, ],
});