React props children

⚛️ React props.children

props.children allows a component to receive and render content passed between its opening and closing tags.

This is useful when you want your component to act as a wrapper, layout, or dynamic container.

🔹 Basic Example


 

export default App;

Output:

Card
└── <h2>Hello React</h2>
└── <p>This is inside the Card component.</p>

🔹 Using Destructuring

✔ Cleaner and recommended syntax

🔹 Passing Multiple Children

Children can be:

  • Text

  • JSX elements

  • Components

  • Arrays

Example:

🔹 Using Children with Styling or Layout


 

🔹 Conditional Rendering with Children


 

🔹 Children as a Function (Advanced Pattern: Render Props)


 

This makes components extremely reusable.

🎯 When to Use props.children

Use it when:

Scenario Example
Reusable layout Cards, modals, containers
Wrapper components Navigation bars, section blocks
Dynamic UI Tabs, lists, sliders
Render props pattern Custom logic with children function

Summary

Feature Explanation
props.children Special prop for nested content
Supports JSX, components, functions, text
Useful for Layouts, wrappers, reusable components
Optional Works even if nothing is passed

✔ Key Takeaway:

props.children makes components flexible and reusable by allowing dynamic nested content.

You may also like...