Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
When to use functional components.
const Title = ({children}) => (
<div className={classes.titleContainer}>
<span className={classes.titleIcon} />
<h3 className={classes.titleHeadline}>
{children}
</h3>
</div>
)
const Select = ({value, options, onChange}) => (
<select onChange={onChange} value={value} className={classes.select}>
{options.map(option => (
<option value={option.value}>{option.title}</option>
))}
</select>
)
const Footer = ({onClose}) => (
<div className={classes.footer}>
<div className={classes.hint}>
Some text.
</div>
<button className={classes.done} onClick={onClose}>Done</button>
</div>
)
export default class MyComponent extends PureComponent {
onChange = (e) => {
// Handle select change.
}
onClose = (e) => {
// Handle close.
}
render() {
return (
<div className={classes.root}>
<Title>Some Title</Title>
<Select onChange={this.onChange} />
<Footer onClose={this.onClose} />
</div>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment