diff --git a/docs/rules/prop-types.md b/docs/rules/prop-types.md
index 7dea535f04..88edd81e16 100644
--- a/docs/rules/prop-types.md
+++ b/docs/rules/prop-types.md
@@ -9,29 +9,43 @@ It can warn other developers if they make a mistake while reusing the component
The following patterns are considered warnings:
```jsx
-var Hello = createReactClass({
- render: function() {
- return
Hello {this.props.name}
;
- }
-});
+function Hello({ name }) {
+ return Hello {name}
;
+ // 'name' is missing in props validation
+}
var Hello = createReactClass({
propTypes: {
firstname: PropTypes.string.isRequired
},
render: function() {
- return Hello {this.props.firstname} {this.props.lastname}
; // lastname type is not defined in propTypes
+ return Hello {this.props.firstname} {this.props.lastname}
;
+ // 'lastname' type is missing in props validation
}
});
-function Hello({ name }) {
- return Hello {name}
;
+// Or in ES6
+class Hello extends React.Component {
+ render() {
+ return Hello {this.props.firstname} {this.props.lastname}
;
+ // 'lastname' type is missing in props validation
+ }
+}
+Hello.propTypes = {
+ firstname: PropTypes.string.isRequired
}
```
Examples of correct usage without warnings:
```jsx
+function Hello({ name }) {
+ return Hello {name}
;
+}
+Hello.propTypes = {
+ name: PropTypes.string.isRequired
+}
+
var Hello = createReactClass({
propTypes: {
name: PropTypes.string.isRequired,
@@ -65,35 +79,15 @@ class HelloEs6WithPublicClassField extends React.Component {
The following patterns are **not** considered warnings:
```jsx
-var Hello = createReactClass({
- render: function() {
- return Hello World
;
- }
-});
-
-var Hello = createReactClass({
- propTypes: {
- name: PropTypes.string.isRequired
- },
- render: function() {
- return Hello {this.props.name}
;
- }
-});
+function Hello() {
+ return Hello World
;
+}
// Referencing an external object disable the rule for the component
-var Hello = createReactClass({
- propTypes: myPropTypes,
- render: function() {
- return Hello {this.props.name}
;
- }
-});
-
function Hello({ name }) {
return Hello {name}
;
}
-Hello.propTypes = {
- name: PropTypes.string.isRequired,
-};
+Hello.propTypes = myPropTypes;
```
## Rule Options
@@ -135,6 +129,6 @@ For this rule to work we need to detect React components, this could be very har
For now we should detect components created with:
+* a function that return JSX or the result of a `React.createElement` call.
* `createReactClass()`
* an ES6 class that inherit from `React.Component` or `Component`
-* a stateless function that return JSX or the result of a `React.createElement` call.