Medium - React "sub-component" - Title sub-component
import React, { Component } from 'react'; | |
import findByType from './findByType'; | |
import css from './somestyle.css'; | |
// We instantiate the Title sub-component | |
const Title = () => null; | |
class Article extends Component { | |
// This is the function that will take care of rendering our Title sub-component | |
renderTitle() { | |
const { children } = this.props; | |
// First we try to find the Title sub-component among the children of Article | |
const title = findByType(children, Title); | |
// If we don’t find any we return null | |
if (!title) { | |
return null; | |
} | |
// Else we return the children of the Title sub-component as wanted | |
return <div className={css.title}>{title.props.children}</div>; | |
} | |
render() { | |
return ( | |
<div className={css.mainContainer}> | |
<div className={css.wrapper}> | |
<div className={css.titleContainer}> | |
{this.renderTitle()} | |
</div> | |
</div> | |
</div> | |
); | |
} | |
} | |
// Lastly we expose the Title sub-component through Article | |
Article.Title = Title; | |
export default Article; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment