06-props

Use an interface to define a prop type

interface ListGroupProps {
  items: string[];
  heading: string;
}

• this behaves similarly to a Python dataclass with attributes
  The interface is only needed for Typescript, not Javascript

Props can have a default value
First set the property to be optional

color?: string

Add the default value in the function

const Button = ({ label, color = "primary", press }: ButtonProps) => {

Using the ListGroupProps

function ListGroup({ items, heading }: ListGroupProps) {

• {} destructure the prop

The properties are used as HTML attributes

<ListGroup items={items} heading="Cities" />

Functions
Properties that can notify the parent element

interface ListGroupProps {
  onSelectItem: (item: string) => void;
}

Call the function when element is clicked

onClick={() => {
  onSelectItem(item);
}}

The component in the parent can have onSelectItem, which calls handleSelectItem

const handleSelectItem = () => {};
onSelectItem={handleSelectItem}

When the item is clicked in the child, it triggers onSelectItem, which notify the parent to call handlSelectItem

It’s recommended to have the props, immutable

• it should not be change within the function

Children
Pass HTML content as a children

interface Props {
	children: ReactNode;
}