Last active
February 15, 2018 13:49
-
-
Save scottdomes/19d4ade69b1a3978730b104558fb5308 to your computer and use it in GitHub Desktop.
React Component Best Practices: Functional Component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import { observer } from 'mobx-react' | |
import { func, bool } from 'prop-types' | |
// Separate local imports from dependencies | |
import './styles/Form.css' | |
// Declare propTypes here, before the component (taking advantage of JS function hoisting) | |
// You want these to be as visible as possible | |
ExpandableForm.propTypes = { | |
onSubmit: func.isRequired, | |
expanded: bool, | |
onExpand: func.isRequired | |
} | |
// Destructure props like so, and use default arguments as a way of setting defaultProps | |
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) { | |
const formStyle = expanded ? { height: 'auto' } : { height: 0 } | |
return ( | |
<form style={formStyle} onSubmit={onSubmit}> | |
{children} | |
<button onClick={onExpand}>Expand</button> | |
</form> | |
) | |
} | |
// Wrap the component instead of decorating it | |
export default observer(ExpandableForm) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Shouldn't it be
onSubmit
Here L18 instead ofonExpand
? 😃