Ahmad Mahboob

Posted on Dec 27 • Originally published at ahmadcodes.hashnode.dev

Passing Children as Props in React (Beginner Friendly Guide)

#beginners #react #javascript #tutorial

When you start learning React, you often hear about props. Props help us pass data from one component to another.

But there is one special prop in React that beginners usually find confusing — children.

In this blog, we’ll understand:

What children is in React
Why we use it
How to pass children as props
Simple examples you can understand easily

No advanced concepts. Just clear basics.

What Are Children Props in React?

In React, children is a special prop that allows you to pass JSX or content inside a component, instead of passing it as a normal prop.

Simple meaning:

Whatever you write between the opening and closing tag of a component becomes children.

Example:

<Card>
  <h2>Hello World</h2>
</Card>

Here, <h2>Hello World</h2> is the children of the Card component.

Why Do We Use Children Props?

Children props are useful when:

You want to create reusable components
You don’t know in advance what content will go inside a component
You want to keep components flexible and clean

Think of it like a container or wrapper that can hold different content.

Basic Example of Children Props

Let’s start with a very simple example.

Parent Component

function App() {
  return (
    <Box>
      <p>This is inside the Box</p>
    </Box>
  );
}

Child Component

function Box({ children }) {
  return (
    <div style={{ border: "2px solid black", padding: "10px" }}>
      {children}
    </div>
  );
}

What’s Happening Here?

Box is a component
Whatever we write inside <Box>...</Box> becomes children
{children} renders that content inside the component

Children Can Be Anything

Children are not limited to text only. They can be:

Text

<Card>Welcome</Card>

HTML / JSX

<Card>
  <h3>Title</h3>
  <p>Description</p>
</Card>

Components

<Card>
  <Button />
</Card>

React treats all of this as children.

Real-World Use Case (Very Common)

Imagine a Button component:

function Button({ children }) {
  return (
    <button className="btn">
      {children}
    </button>
  );
}

Usage:

<Button>Login</Button>
<Button>Sign Up</Button>

Instead of creating multiple buttons, you reuse one component and pass different text using children.

Children vs Normal Props

Using Normal Props

<Button text="Login" />

Using Children

<Button>Login</Button>

Why Children Is Better?

More readable
More flexible
Can pass complex JSX, not just text

Common Beginner Mistakes

Here are some common mistakes beginners make:

Forgetting to render {children} inside the component
Thinking children is a keyword (it’s just a prop)
Using self-closing tags when children are needed

❌ <Box />

✅ <Box>Content</Box>
Confusing children with normal props

When Should You Use Children?

Use children when:

You are building reusable UI components
Your component is acting as a wrapper or layout
Content inside the component can change

Do not use children when the component has a fixed structure.

Final Thoughts

Children props are one of the most powerful and simple features of React.

Once you understand them, writing clean and reusable components becomes much easier.

If you are serious about React, mastering children is not optional — it’s essential.

Keep practicing small examples. That’s how React really clicks.