Props are typed input values that configure what a JSX component renders or how it behaves. A component stores them in a props object, where each property can provide display data, configuration, or a callback for user events. section 16.7.1 section 16.8.1
Typical prop definitions include:
- Domain data, such as product, order, products, categories, or selectedCategory. section 16.8.1 section 17.3.1
- Callbacks, such as callback, submitCallback, addToOrderCallback, or filterCallback, invoked by buttons and other event handlers. section 16.8.1 section 21.3
- DOM property names rather than matching HTML attribute names; for example, JSX uses className instead of class. section 16.7.1
Product display and filtering
A ProductItem can receive a Product and a callback typed as (product: Product, quantity: number) => void. A CategoryList can receive category names, the selected category, and a callback that receives the clicked category. JSX then reads this.props.product and invokes this.props.callback from an onclick handler. section 16.8.1
Listing 16.31 The contents of the productItem.tsx file in the src folder
import { createElement } from "./tools/jsxFactory";
import { Product } from "./data/entities";
export class ProductItem {
private quantity: number = 1;
props: {
product: Product,
callback: (product: Product, quantity: number) => void
}
getContent(): HTMLElement {
return <div className="card card-outline-primary m-1 p-1 bg-light">
<h4>
{ this.props.product.name }
<span className="badge rounded-pill bg-primary text-white"
style="float:right">
<small>${ this.props.product.price.toFixed(2) }</small>
</span>
</h4>
<div className="card-text bg-white p-1">
{ this.props.product.description }
<button className="btn btn-success btn-sm float-end"
onclick={ this.handleAddToCart } >
Add To Cart
</button>
<select className="form-control-inline float-end m-1"
onchange={ this.handleQuantityChange }>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
}
handleQuantityChange = (ev: Event): void => {
this.quantity = Number((ev.target as HTMLSelectElement).value);
}
handleAddToCart = (): void => {
this.props.callback(this.props.product, this.quantity);
}
}
Inspect the ProductItem implementation to see a complete props declaration connected to JSX rendering, product data, quantity selection, and an add-to-order callback. section 16.8.1
