Children has an implicit contract:

Anything you pass in will be rendered as written

obvs react doesn't give us such a guarantee, but I think it's a helpful convention

- argument naming clarity/predictability
ideally we name our arguments so it's clear what's happening from the outside
`adopt(parent, child)`


children means "stuff I will render as my main content"
(main content is super up for interpretation)

`ContentFrame({}, children)`
children means "some stuff I will render as my main content, some stuff I will selectively extract and render elsewhere,
also if you pass two of the same special node I will only render one of them"

- ease of implementation
- interface is limited to the things you can expect
square block square hole
you don't need type-checking and warnings because you can't even provide the wrong thing!

```jsx
const ContentFrame = ({title, children}) => {
  const childrenArray = React.Children.toArray(children);
  const possibleHeaderChildren = childrenArray.find(child => child.type === ContentFrameHeader);
  const defaultHeader = (
    <ContentFrameHeader>
      <Title>{title}</Title>
    </ContentFrameHeader>
  )

  const header = possibleHeaderChildren || defaultHeader;

  const actualChildren = childrenArray.filter(child => child.type !== ContentFrameHeader);

  return (
    <div className="content-frame">
      { header }
      <ContentFrameBody>
        { actualChildren }
      </ContentFrameBody>
    </div>
  );
}
```

consider usages:

```jsx
const justTitle = (
  <ContentFrame title="Hello">
    I am body content
  </ContentFrame>
);

const customHeader = (
  <ContentFrame>
    <ContentFrameHeader>
      <Title>Hello</Title>
    </ContentFrameHeader>
    I am body content
  </ContentFrame>
);

const trollFace = (
  <ContentFrame title="Hello">
    I am body content
    <ContentFrameHeader>
      <Title>I am your friend</Title>
    </ContentFrameHeader>
    <ContentFrameHeader>
      You will never see me again
    </ContentFrameHeader>
  </ContentFrame>
);
```

without looking at the implementation, tell me what this thing does. Explain in a sentence what `children` means?

```jsx
const ContentFrame = ({title, HeaderComponent, children}) => {
  const Header = HeaderComponent || ContentFrameHeader;

  return (
    <div className="content-frame">
      <Header>
        <Title>{ title }</Title>
      </Header>
      <ContentFrameBody>
        { children }
      </ContentFrameBody>
    </div>
  );
}
```

usages:
```jsx
<ContentFrame title="hello">
  I am body content
</ContentFrame>
```

```jsx
<ContentFrame title="hello" HeaderComponent={CustomHeader}>
  I am body content
</ContentFrame>
```

jsx props:
```jsx
const ContentFrame = ({title, headerRightContent, children}) => {
  return (
    <div className="content-frame">
      <ContentFrameHeader>
        <Title>{ title }</Title>
        <ContentFrameHeaderRight>
          { headerRightContent }
        </ContentFrameHeaderRight>
      </ContentFrameHeader>
      <ContentFrameBody>
        { children }
      </ContentFrameBody>
    </div>
  );
}
```

passing props:
```jsx
const AcceptancePage = ({onSubmit}) => {
  return (
    <ContentFrame {...{
      title: 'Warning!',
      headerRightContent: (
        <SubmitButton onClick={onSubmit}>OKAY DOKAY</SubmitButton>
      );
    }}>
      Are you sure this is ok
    </ContentFrame>
  );
};
```

```jsx
const AcceptancePageHeader = ({onSubmit}) => {
  return (
    <ContentFrameHeader>
      <Title> Warning! </Title>
      <ContentFrameHeaderRight>
        <SubmitButton onClick={onSubmit}> OKAY DOKAY </SubmitButton>
      </ContentFrameHeaderRight>
    </ContentFrameHeader>
  )
};

const AcceptancePage = ({onSubmit}) => {
  return (
    <ContentFrame {...{
      HeaderComponent: AcceptancePageHeader,
      onSubmit,
    }}>
      Are you sure this is ok
    </ContentFrame>
  );
};
```