My React Journey: Day 3 – Rendering Lists with Angular @for and React .map() – ██FR█████ █INTELL███████████

This content originally appeared on DEV Community and was authored by Michele

Hello everybody, welcome back to Day 3 of my React Journey!
Yesterday we rendered a simple header, but today we’re leveling up:

We’ll take a typed array of shopping items, render it inside our component, and add a delete button with an icon.
This will show how Angular and React approach list rendering — Angular with the new @for syntax, React with the standard .map() method.

I’ve also updated the CSS styles for the shopping cart, but to keep the code clean we’ll skip them here — you can find the full styles in the repository
.

Angular 19 Application

In Angular we start by defining a TypeScript type for our shopping items:

type Item = {
  id: number;
  label: string;
  purchased: boolean;
  higherPriority: boolean;
};

We store an array of items inside a signal, and render them with Angular’s new control-flow syntax @for.
For the delete button, we add an Angular Material remove icon.

Code: ShoppingCartComponent

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { matRemove } from '@ng-icons/material-icons/baseline';

type Item = {
  id: number;
  label: string;
  purchased: boolean;
  higherPriority: boolean;
};

@Component({
  selector: 'app-shopping-cart',
  imports: [NgIcon],
  viewProviders: [provideIcons({ matRemove })],
  template: `
    <h1>{{ header() }}</h1>
    <ul>
      @for (item of items(); track item.id) {
        <div class="list-item">
          <li>{{ item.id }} - {{ item.label }}</li>
          <button class="btn btn-cancel" aria-label="Delete">
            <ng-icon name="matRemove"></ng-icon>
          </button>
        </div>
      }
    </ul>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ShoppingCartComponent {
  header = signal('Shopping List App - Angular 19');
  items = signal<Item[]>([
    { id: 1, label: '10 Apples', purchased: false, higherPriority: false },
    { id: 2, label: '5 Bananas', purchased: false, higherPriority: false },
  ]);
}

Angular key points:

signal<Item[]>→ reactive array of items.

@for (item of items(); track item.id) → Angular’s modern, optimized replacement for *ngFor.

track item.idensures stable identity for efficient DOM updates.

ChangeDetectionStrategy.OnPush makes the component even more performant.

React

React follows the same logic, but instead of structural directives, we rely on plain JavaScript array methods.
We’ll define a type Item, create the array, and use .map() to loop through the items.

Code: ShoppingCartComponent

import { Icon } from "@iconify/react";
import "./ShoppingCart.css";

type Item = {
  id: number;
  label: string;
  purchased: boolean;
  higherPriority: boolean;
};

export function ShoppingCart() {
  const header: string = "Shopping List App - React";

  const items: Item[] = [
    { id: 1, label: "10 Apples", purchased: false, higherPriority: false },
    { id: 2, label: "5 Bananas", purchased: false, higherPriority: false },
  ];

  return (
    <>
      <h1>{header}</h1>
      <ul className="shopping-list">
        {items.map((item) => (
          <div key={item.id} className="list-item">
            <div className="list-item-content">
              <span className="item-text">
                {item.id} - {item.label}
              </span>
            </div>
            <button className="btn btn-cancel" aria-label="Delete">
              <Icon icon="ic:baseline-remove" />
            </button>
          </div>
        ))}
      </ul>
    </>
  );
}

React key points for Angular developers:

type Item→ same TypeScript typing as in Angular.

items.map(...)→ React’s way of looping over data, equivalent to Angular’s @for.

key={item.id} → same purpose as track item.id in Angular. It helps React efficiently update the DOM.

JSX interpolation {} is the React counterpart of Angular’s {{}}.

The styles are placed in ShoppingCart.css — see the repository
for details.

Summary

Day 3 upgrade: from a single header to a typed, rendered list of items.

Angular: used signals + @for loop with tracking for performance.

React: used a TypeScript type + .map() to iterate items with keys.

Both approaches highlight the same principle: data drives the UI.

Github Repos:
https://github.com/michelemalagnini/angular-project-example
https://github.com/michelemalagnini/react-fundamental

This content originally appeared on DEV Community and was authored by Michele