Passing Props

You pass props to a component the exact same way you pass attributes to an HTML tag.

function App() {
  return (
    <div>
      {/* Passing a string prop */}
      <Greeting name="Alice" />
      
      {/* Passing a number (requires curly braces!) */}
      <Greeting name="Bob" age={25} />
    </div>
  );
}

The child component receives all these attributes bundled into a single object called props.

function Greeting(props) {
  return <h1>Hello, {props.name}! You are {props.age} years old.</h1>;
}