← Back to React Recipes

Passing React components via props

Two things right off the bat:

• You can pass React components on any prop, not just children, and conversely;
• You can pass anything to children, not just React components.

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>
	)
}