JSX - loop for list

Question

const items = [
  {
    name: "Name 1",
    price: "From $8,000",
  },
  { name: "Name 2", 
    price: "From $45,500", 
  },
  { 
    name: "Name 3", 
    price: "$25,000–$39,000"
  },
];

<div className="grid">
  {items.map((it, i) => (
    <article className="card is-image-overlay" key={i} tabIndex={0}>
      <div className="card-media">
        <img src={it.img} alt={it.name} />
      </div>

      <div className="card-label top">
        <h3 className="project">{it.name}</h3>
      </div>
      <div className="card-label bottom">
        <p className="price">{it.price}</p>
      </div>

      <div className="card-hover">
        <h3 className="project big">{it.name}</h3>
        {it.desc && <p className="desc">{it.desc}</p>}
      </div>

      <div className="card-tint" aria-hidden="true" />
    </article>
  ))}
</div>