Props and Component Composition in React

1. What are Props?

Props (short for properties) are the mechanism in React that allows data to flow from a parent
component to a child component. They provide a way for components to accept inputs that can
customize their behavior or appearance.

Props are immutable, meaning that a component cannot modify the props it receives. They are read-
only, and their main purpose is to pass data, event handlers, or other functions from a parent
component down to a child component.

Key Points about Props:

 Read-Only: Props are immutable, and their values cannot be changed by the child
component that receives them.

 Passed from Parent to Child: The parent component passes props to its child components.

 Customizable: Props can contain different types of data, including strings, numbers, objects,
arrays, and functions.

 Reusability: Props make components reusable by allowing you to customize the

Example 1: Basic Usage of Props

function Greeting(props) {

return <h1>Hello, {props.name}!</h1>;

function App() {

return <Greeting name="John" />;

export default App;

In this example:

 Greeting is a child component that expects a name prop.

 The parent component (App) passes a value for the name prop, and the Greeting component
uses that value to render a personalized greeting message: Hello, John!.

Example 2: Passing Different Props

You can also pass multiple props to a component.

function UserProfile(props) {
 return (

<div>

<h2>{props.name}</h2>

<p>{props.age} years old</p>

</div>

);

function App() {

return (

<div>

<UserProfile name="Alice" age={25} />

<UserProfile name="Bob" age={30} />

</div>

);

export default App;

In this example:

 The UserProfile component receives two props: name and age.

 The parent component (App) passes these props with different values, so each user profile
will display different information.

Example 3: Passing Functions as Props

Props can also be used to pass functions, which can be invoked inside the child component.

function Button(props) {

return <button onClick={props.handleClick}>{props.label}</button>;

function App() {

const handleClick = () => {

alert("Button clicked!");
 };

return <Button label="Click Me" handleClick={handleClick} />;

export default App;

In this example:

 The Button component receives a handleClick function and a label as props.

 When the button is clicked, the handleClick function is called, displaying an alert.

2. Component Composition

Component Composition refers to the practice of combining multiple smaller components into a
larger, more complex component. This helps you break down a user interface into reusable, modular
pieces, which leads to better code organization and easier maintenance.

React’s component-based architecture makes it easy to build large UIs by composing smaller
components.

Example 1: Reusable Card Component

Let's say you want to create a reusable Card component that displays a title and some content. By
using props, you can customize the content of each card when using it.

function Card({ title, content }) {

return (

<div className="card">

<h2>{title}</h2>

<p>{content}</p>

</div>

);

function App() {

return (

<div>

<Card title="First Card" content="This is the content of the first card." />
 <Card title="Second Card" content="This is the content of the second card." />

<Card title="Third Card" content="This is the content of the third card." />

</div>

);

export default App;

In this example:

 The Card component accepts two props: title and content.

 You can reuse the Card component multiple times, passing different title and content values
each time to customize its output.

 This makes the component highly reusable and customizable.

Example 2: Nested Components (Component Composition)

You can also nest components within each other to build more complex UIs.

function Header() {

return <header><h1>My Website</h1></header>;

function Footer() {

return <footer><p>&copy; 2024 My Company</p></footer>;

function MainContent() {

return (

<main>

<h2>Welcome to My Website</h2>

<p>This is the main content area.</p>

</main>

);

}
 function App() {

return (

<div>

<Header />

<MainContent />

<Footer />

</div>

);

export default App;

In this example:

 The Header, MainContent, and Footer components are all separate, reusable components.

 The App component is composed of these smaller components. This structure allows you to
create a page layout by combining them, which is the essence of component composition.

Example 3: Passing Components as Props

In addition to passing data, you can also pass entire components as props. This is useful when you
want a component to decide what content to display.

function Card({ title, children }) {

return (

<div className="card">

<h2>{title}</h2>

<div>{children}</div>

</div>

);

function App() {

return (

<div>

<Card title="Card with Custom Content">

<p>This is some custom content passed as children!</p>

</div>

);

export default App;

In this example:

 The Card component accepts a title prop and a children prop.

 The children prop allows you to pass arbitrary content into the Card component, which
makes it more flexible and reusable.

Combining Props and Composition

By combining props and component composition, you can create complex and customizable UIs.
Here’s an example where both concepts are used together:

function Button({ label, onClick }) {

return <button onClick={onClick}>{label}</button>;

function Card({ title, content, onClickButton }) {

return (

<div className="card">

<h2>{title}</h2>

<p>{content}</p>

<Button label="Click Me" onClick={onClickButton} />

</div>

);

function App() {

const handleClick = () => {

alert('Button clicked!');

};
 return (

<div>

<Card

title="Card 1"

content="This is the content for Card 1."

onClickButton={handleClick}

/>

<Card

title="Card 2"

content="This is the content for Card 2."

onClickButton={handleClick}

/>

</div>

);

export default App;

In this example:

 The Card component accepts a title, content, and a button click handler (onClickButton) as
props.

 The Button component is passed as a child of the Card and is customized via the props
passed to it.

Conclusion

In Day 10, you learned:

 Props: The essential concept for passing data between parent and child components in
React. Props are immutable and allow customization of a component’s behavior or content.

 Component Composition: How to compose smaller, reusable components to create larger,

 By combining props and composition, you can build highly flexible and reusable components
that form the foundation of React applications.