React Recipes

Passing React components via props

Two things right off the bat:

So when modeling the communication between components, you can:

Create slots to be filled in your component

class Reader extends React.Component {
render(
<div className='reader'>
<div className='sidebar'> { this.props.sidebar } </div>
<div className='content'> { this.props.content } </div>
</div>
)
}

<Reader
sidebar={<Sidebar/>}
content={<Content/>}
/>

Use children as the single slot to be filled

class Modal extends React.Component {
render(
<div className='modal'>
<div className='modal__content'>
{ this.props.children }
</div>
</div>
)
}