Props

Props are how you pass data into a component. They work like function arguments — the parent component provides them, and the child component receives them. The name 'props' is short for properties.

Props flow in one direction: from parent to child. A component cannot modify its own props. If you want to change data, that data needs to live in state (covered in the next lesson).

You pass props as attributes in JSX: <Greeting name="Tolu" />. Inside the component, you receive them as a single object and destructure what you need: function Greeting({ name }).

You can pass any JavaScript value as a prop — strings, numbers, booleans, arrays, objects, and even functions. For non-string values, wrap them in curly braces: <Card price={1500} active={true} />.