Components
Introduction
In order to truly understand props in React, we first need to be clear on what components are. A component is a reusable piece of the user interface that encapsulates structure, styling, and behavior.
Instead of repeating the same code across a project, we can build small, independent components and compose them together to form complete pages or applications.
Jsx
At its core, a component in React is simply a JavaScript function that returns JSX. JSX is a special syntax extension that looks like HTML but runs in JavaScript. It allows us to describe what the UI (User interface) should look like while keeping the full power of JavaScript inside our markup.
It looks like the following
function Greeting() {
const styles = {
color: "blue",
fontSize: "24px",
fontFamily: "Arial, sans-serif"
};
return (
<div>
<h1 style={styles}>Hello, World!</h1>
<p className="subtitle">Welcome to React components with JSX.</p>
</div>
);
}
Props
Introduction
In the context of React components, props (short for properties) are the way we pass data from a parent component down to a child component.
Think of them like function parameters:
A component receives props as an argument.
The props define how the component behaves or what it displays.
Props are read-only (immutable inside the child), since the child cannot change them, only use them.
Code snippet
Let’s explore the following code snippet:
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Using the component with different props
function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}
What’s happening up here?
The App component is the parent, since it’s the one that render another component inside its JSX. In our previous example, the App component uses <Greeting /> inside its return statement.
It renders Greeting twice, passing a different name each time.
Inside Greeting, we use props.name to display the correct value.
The result on screen:
Hello, Alice!
Hello, Bob!
Characteristics
Read-Only
Props are read-only. It means they cannot be modified by the child. If you try, React will warn you.
function Greeting(props) {
// ❌ Avoid doing this!
// props.name = "Changed"; // Error: props are read-only
return <h1>Hello, {props.name}!</h1>;
}
The read-only characteristic enforces the one-way data flow in React: data flows from parent → child, not the other way around.
Props are meant to be used, not changed.
Any data type
Props aren’t limited to strings. You can pass numbers, booleans, objects, arrays, and even functions.
In the following code snippet, App renders <Profile user={user}…, React bundles everything inside an object, it does not matter how many objects or functions are inside.
So, inside `Profile`, we can access:
function Profile(props) {
return (
<div>
<h2>{props.user.name}</h2>
<p>Age: {props.user.age}</p>
<button onClick={props.onLogout}>Logout</button>
</div>
);
}
function App() {
const user = { name: "Alice", age: 28 };
function handleLogout() {
alert("Logged out!");
}
return <Profile user={user} onLogout={handleLogout} />;
}
Default values
If a parent component does not pass a prop, you can define a default.
function Button({ label = "Click Me" }) {
return <button>{label}</button>;
}
function App() {
return (
<div>
<Button /> {/* Uses default: "Click Me" */}
<Button label="Submit" /> {/* Uses passed prop */}
</div>
);
}
Spread
In React, you don’t always need to pass props one by one. You can use the spread operator, which is …, to pass all the properties of an object as props to a component.
Take a look at the following code snippet without spread
function UserCard({ name, age }) {
return (
<div>
<h3>{name}</h3>
<p>Age: {age}</p>
</div>
);
}
function App() {
const user = { name: "Alice", age: 28 };
return <UserCard name={user.name} age={user.age} />;
}
Now, the following with spread:
function App() {
const user = { name: "Alice", age: 28 };
// Spreads `user` into { name: "Alice", age: 28 }
return <UserCard {...user} />;
}
Now, UserCard automatically receives props.name and props.age without you having to type them out one by one.
Keep in mind that spreading blindly can make it harder to know which props a component is using. It’s often best for cases like “pass all user data”.
Children
Every React component automatically has access to a special prop called children. It represents the content you place between the opening and closing tags of a component.
function Card(props) {
return <div className="card">{props.children}</div>;
}
function App() {
return (
<Card>
<h1>Welcome!</h1>
<p>This text is inside the Card component.</p>
</Card>
);
}
So, everything between <Card> and </Card> is passed as props.children.
Conditional
Since props are just JavaScript values, you can pass conditional expressions.
function Status({ online }) {
return <p>{online ? "🟢 Online" : "🔴 Offline"}</p>;
}
function App() {
return (
<div>
<Status online={true} />
<Status online={false} />
</div>
);
}
Done
