← React Beginner Questions - Set 5 Q49

What is the significance of the children prop in React?

React Beginner Questions - Set 5

`children` is the composition primitive: it lets a component wrap arbitrary content without knowing what it is.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function Panel({ title, actions, children }) {
  return (
    <section className="panel">
      <header>
        <h2>{title}</h2>
        {actions}
      </header>
      <div className="panel__body">{children}</div>
    </section>
  );
}

function App() {
  return (
    <Panel title="Orders" actions={<button>Reload</button>}>
      <p>Anything here arrives as `children`.</p>
      <ul><li>#1001</li><li>#1002</li></ul>
    </Panel>
  );
}

What to notice

• `children` can be a string, an element, an array or a function — `React.Children` utilities help when it varies.
• Passing an element as `actions` is the same mechanism as a named slot.
• Composition through `children` is preferred over configuration props like `bodyContent`.