top of page
Logo der Online Agentur mdwp

Children Prop

In React JS, 'Children Prop' is a special prop, quite different from the rest of the props because it isn't passed directly to a component like other standard props (e.g. "myprop="prop value"). Instead, it's used to pass components or elements from parent components to child components.

The most common case is when creating a component that wraps other components. Let's say we have a Card component. We want to create different cards with different content but with the same styles. Therefore, we have a parent component (Card), and the content can be passed from a parent component to a child component via the prop children.

```jsx
function Card(props) {
return <div className='card'>{props.children}</div>
}

function App() {
return (
<Card>
<h2>Welcome</h2>
<p>Hello, welcome to my app!</p>
</Card>
);
}

ReactDOM.render(<App />, document.getElementById("root"));
```

In this example, the Card component has the "children prop" which includes the elements nested inside when invoking the <Card>. The children are the `<h2>` and `<p>`. No matter what type of content you place inside, React will display it because it's passed through the 'children' prop of the Card component. You could put any combination of JSX and React components inside and they would be rendered just as you'd expect.

This is a powerful feature which allows the composition of components in React. You can create a parent component with shared characteristics and use children prop to pass the unique content. In other words, the children prop lets you pass components as data to other components, which allows complex applications to be built out of simple building blocks.

bottom of page