Learn the concept
Props
Props (properties) are read-only inputs passed from parent to child components, similar to function arguments. They enable component reusability and one-way data flow from parent to child.
Props Basics:
Key Concepts:
Data Flow Patterns:
// Parent component
function App() {
const user = { name: 'Alice', age: 25 };
return (
<div>
{/* Passing different prop types */}
<Greeting
name="Alice" // string
age={25} // number
isLoggedIn={true} // boolean
user={user} // object
hobbies={['reading']} // array
onClick={() => {}} // function
/>
</div>
);
}
// Child component with destructuring
function Greeting({ name, age, isLoggedIn }) {
return (
<div>
<h1>Hello, {name}!</h1>
<p>Age: {age}</p>
{isLoggedIn && <p>Welcome back!</p>}
</div>
);
}
// With default props
function Greeting({ name = 'Guest', age = 0 }) {
return <p>{name} is {age} years old</p>;
}Using props to make components configurable (themes, sizes, variants) without code changes
Passing components as props (render props, children) for flexible UI composition
Mapping API response fields to component props for data display
Build components with comprehensive prop validation using TypeScript interfaces
Create an `as` prop pattern that lets a Button render as <a>, <button>, or <Link>