React 18

Passing Data via Props

• Props or properties are inputs to our components

• Use typescript interface to define interface/shape of object

• Pass props as attributes of html elements

• Use quote for fixed/string values

• Define interface

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

• Specify the type for props

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

• App Component

function App() {
  let items = ["Chennai", "Bangalore", "Trivandrum", "Hyderabad"];

  return (
    <div>
      <ListGroup items={items} heading="Cities"></ListGroup>
    </div>
  );
}