You are viewing a free preview of this lesson.
Subscribe to unlock all 10 lessons in this course and every other course on LearningBro.
Props (short for properties) are how React components receive data from their parent. They are the primary mechanism for making components reusable and configurable.
You pass props as JSX attributes and receive them as an object argument in the component function:
function Greeting({ name, greeting }) {
return <p>{greeting}, {name}!</p>;
}
function App() {
return <Greeting name="Alice" greeting="Hello" />;
}
Using destructuring in the parameter list ({ name, greeting }) is the idiomatic way to access individual props.
A component must never modify its own props. Props flow in one direction — from parent to child — and are immutable from the child's perspective. This one-way data flow makes React applications predictable and easy to debug.
You can provide default values using JavaScript's default parameter syntax:
function Button({ label = "Click me", variant = "primary" }) {
return <button className={`btn btn-${variant}`}>{label}</button>;
}
Props can be strings, numbers, booleans, arrays, objects, or even functions. Non-string values must be passed inside curly braces:
<Card title="My Card" count={42} isActive={true} tags={["react", "js"]} />
Boolean props can be written as shorthand — is equivalent to .
The special children prop holds whatever is nested between a component's opening and closing tags:
function Card({ title, children }) {
return (
<div className="card">
<h2>{title}</h2>
<div className="card-body">{children}</div>
</div>
);
}
function App() {
return (
<Card title="Welcome">
<p>This is the card content.</p>
</Card>
);
}
The children prop makes wrapper or layout components highly flexible.
When you need to forward all props from one component to another (for example, wrapping a native element), you can use the spread operator:
function Input(props) {
return <input className="styled-input" {...props} />;
}
This passes all received props (like type, value, onChange) through to the underlying element.
Understanding props gives you the ability to build flexible, reusable component libraries. Combined with state, they form the complete data model for any React application.
Subscribe to continue reading
Get full access to this lesson and all 10 lessons in this course.