That sounds simple except we don't know what the content of the dialog is going to be. Imagine at one place we might want to display an employee contact within a dialog and at some other place we might want to display a grid. This component itself has no knowledge of it beforehand. And if we wanted to make this component truly reusable it **should not** have any knowledge of it beforehand.

The job of `Dialog` component is to render a modal window but it shouldn't care about the content - we should be able to use this component at different places to render different things.

<EmployeeProfile></EmployeeProfile>

Here we have a component called `EmployeeProfile` (any other valid React component would work here) as a "children" of `Dialog`. When we pass a "children" to a component it will be available inside that component as a `props` called `children`. So in this case, `EmployeeProfile` will be available inside the `Dialog` component as `props.children`. We can rewrite render function of `Dialog` so that it renders `props.children`.

Think about what we did here. `Dialog` component really doesn't know what it's `children` would be beforehand. Whoever is using this `Dialog` component can pass in any `children` that they like. Within the `render` function `Dialog` says - hey I'll display anything my user passes me as children, I don't need to know what that is.

Another pattern to achieve similar thing in React is by using what's known as "render props" pattern.

So now let's take the same dialog example but let's make it more sophisticated. Imagine the dialog has a header, body and footer section. We want the user of this component to be able display anything they like on those three section.

<div className={'dialogHeader}>

The `props.children` approach we used above might not work well here. All the children we pass as "children" would be available as `props.children` and it might be little cumbersome to split the children into these three segment - "header", "body" and "footer". Wouldn't it be nice if we could tell the `Dialog` component explicitly what it should render on "header", "body" and "footer" section?

We can use the "render props" pattern to do exactly that. All this means is that we can pass three render function as `props` that tells what the dialog should render inside each segment. For ex lets look at a usage:

Here all we are really doing is passing three different `props` called `renderHeader`, `renderBody` and `renderFooter`. They are all just a function when called returns appropriate React component to display. Now we can edit the `Dialog` component to get it working as expected:

<div className={'dialogHeader}>

Here instead of displaying `this.props.children` like we did previously, we executed different props function as appropriate on different section. Whatever is returned from that function during runtime will be displayed on that section. The `Dialog` component remains completely agnostic to what it's displaying.

Let's do some exercise shall we? Please open the exercise file and follow to instructions to make appropriate changes.

2. The "render" props we passed is just any regular javascript function, its just that it's returning some component. We can do really anything here that we can do in a javascript function. When we called these function inside the `Dialog` we could pass some arguments if we like. The only limit here really is your imagination here.

3. We can pass around components in React as a `props` just like we can pass an object or string or function. End of the day React component are just functions. So take the liberty of passing it around.