diff --git a/README.md b/README.md index 4812e90..df79281 100644 --- a/README.md +++ b/README.md @@ -411,32 +411,42 @@ See: [Compound State](#compound-state) pattern ## Existence Checking -Do not check existence of `prop` objects. Use `defaultProps`. +Do not check existence of props at the root of a component. +Componenst should not have two possible return types. ```javascript // bad -render () { - if (this.props.person) { - return
{this.props.person.firstName}
; - } else { - return null; - } +const Person = props => { + if (this.props.firstName) + return
{this.props.firstName}
+ else + return null } ``` +Componenents should *always* render. Consider adding `defaultProps`, where a sensible default is appropriate. + ```javascript -// good -class MyComponent extends React.Component { - render() { - return
{this.props.person.firstName}
; - } +// better +const Person = props => +
{this.props.firstName}
+ +Person.defaultProps = { + firstName: "Guest" } +``` -MyComponent.defaultProps = { - person: { - firstName: 'Guest' - } -}; +If a component should be conditionally rendered, handle that in the owner component. + +```javascript +// best +const TheOwnerComponent = props => +
+ {props.person + ? + : null + } +
``` This is only where objects or arrays are used. Use PropTypes.shape to clarify