React Children! Yeah, That’s What They Called

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

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

{ children: <some React nodes> }

{ children: React.ReactNode }

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>

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

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

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

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

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.