React  

React Children! Yeah, That’s What They Called

What are children in React?

React gives every component a special prop called children. It represents whatever you wrap inside your component.

Example

//Card component
const Card = ({ children }: { children: React.ReactNode }) => {
    return (
    <div className="card">           
     {children}
        </div>
    );
}

// Usage
<Card>
   <h2>This is children</h2>
</Card>

What gets rendered?

Yeah, that’s it. It just drops whatever you put between the opening and closing tags into the component. so "<h2>This is children</h2>" is children of Card component.

In Card component, we have {children} as function parameter.

First, we destructured { children }, which simply means you're receiving an object like:

{ children: <some React nodes> }

Now we need to make sure children is valid ReactNode, so we use Type Annotation.

{ children: React.ReactNode }

This ensures TypeScript that children must be a valid React node, meaning a string, JSX, array of JSX, etc.

When to Use Children?

Any time you want to build a layout, a wrapper, a modal, a sidebar, a form section, anything where the content inside needs to be customizable.

Real Example: Modal

const Modal = ({ children }: { children: React.ReactNode }) => {
    return (
      <div>
        {children}
      </div>
    );
}


// Usage
<Modal>
    <h1>Delete Item</h1>
    <p>Are you sure you want to delete this?</p>
    <button>Confirm</button>
</Modal>

No need for a million props like title, content, footer. Just pass whatever content you want.

Multiple ways to access children in the function parameters

One we already saw above, which is Destructured in the parameter list (most common).

Next,

1. Access via props object

const Card = ( props: { children: React.ReactNode }) => {
  return <div>{props.children}</div>;
};

2. With type alias (cleaner for multiple props)

type CardProps = {
  children: React.ReactNode;
};

const Card = (props: CardProps) => {
  return <div>{props.children}</div>;
};

Or destructured

const Card = ({ children }: CardProps) => {
  return <div>{children}</div>;
};

3. Using React.FC

React.FC stands for React Function Component. It’s a TypeScript type (or interface) provided by React to help you type your functional components easily.

import type { ReactNode } from "react";

interface ModalProps {
  children: ReactNode;
}

const Modal : React.FC<ModalProps> = ({ children }) => {
    return (
      <div>
        {children}
      </div>
    );
}

export default Modal;

children prop

If we've nested elements, like this, You're not just nesting content inside <Modal>, you're actually passing it as a prop. And that prop has a special name in React:

It's called children

<Modal>
  <h1>Delete Item</h1>
  <p>Are you sure you want to delete this?</p>
  <button>Confirm</button>
</Modal>

So, when you call Model component,  you need to explictly mention that children prop: This tells React: Hey, I’m expecting to receive some nested content, and I’ll render it here.

type CardProps = {
  children : React.ReactNode;
}

const Modal = ( { children } : CardProps) => {
....
}

What happens if you don’t use children?

If you name the prop something else (like abc), like this:

type ModalProps = {
  abc: React.ReactNode;
};

const Modal = ({ abc }: ModalProps) => {
  return <div>{abc}</div>;
};

React won’t know how to connect the nested content, and you’ll get a runtime error like:

Objects are not valid as a React child (found: object with keys {children})

That’s because React is sending the content using the children prop, but your component is looking for a prop called abc, which doesn’t exist, so it tries to render the whole unexpected object and crashes.

ReactNode

We've been using ReactNode to define childern's type.

type Props = {
  children: React.ReactNode;
};

Why ReactNode?

Because it covers everything React can render, strings, numbers, elements, fragments, arrays, etc.

Optional Children

Not every component needs to have children. Type it right.

Use children? if the component doesn’t always expect something inside.

interface ModalProps {
  children?: ReactNode;
}

const ModelWithNoProps = () => {
    return (
    <div>
    </div>
    );
}

children != props.children always

If you destructure wrong or forget to pass children down, React won’t warn you.

//Bad
const Card = (props: any) => {
  return <div>{props.content}</div>; // Oops, no props.children
};

//Better
const Card = ({ children }: { children: React.ReactNode }) => {
  return <div>{children}</div>;
};

Advanced Pattern: Function as Children

Not just JSX, you can pass a function as children.

interface ModalProps {
  children: (data: string) => ReactNode;
}

const Modal = ({ children }: ModalProps) => {
  const data = "Hello from modal";
  return <>{children(data)}</>;
}


//Usage
<Modal>
   {(value) => <p>{value}</p>}
</Modal>

Summary

  • children is just a prop. It’s what goes between your component tags.
  • Use it to create wrappers, layouts, modals, and flexible UI.
  • Type it as React.ReactNode.
  • Optional? Use children?.
  • Function as children is powerful when used right.
  • Don’t wrap everything in unnecessary props. Let the children breathe.

Membership not found