From f5b61c2091af242483a75cddffdb1d2a84e74333 Mon Sep 17 00:00:00 2001
From: Bradley Spaulding <brad.spaulding@gmail.com>
Date: Wed, 2 Mar 2016 15:55:50 -0800
Subject: [PATCH] createChainableTypeChecker suggests mistyped props by case

---
 .../__tests__/ReactElementValidator-test.js   | 24 +++++++++++++++++++
 .../classic/types/ReactPropTypes.js           | 11 +++++----
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js b/src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js
index 3cdcd48e5bb..75b9e874765 100644
--- a/src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js
+++ b/src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js
@@ -385,6 +385,30 @@ describe('ReactElementValidator', function() {
     expect(console.error.calls.length).toBe(2);
   });
 
+  it('should check for suggested props by case', function() {
+    spyOn(console, 'error');
+
+    var Component = React.createClass({
+      propTypes: {
+        onAction: React.PropTypes.func.isRequired,
+      },
+      render: function() {
+        return React.createElement('span', null, this.props.prop);
+      },
+    });
+
+    ReactTestUtils.renderIntoDocument(
+      React.createElement(Component, {onaction: function() {}})
+    );
+
+    expect(console.error.calls.length).toBe(1);
+    expect(console.error.argsForCall[0][0]).toBe(
+      'Warning: Failed propType: ' +
+      'Required prop `onAction` was not specified in `Component`. ' +
+      'Did you mistype `onaction`?'
+    );
+  });
+
   it('should warn if a PropType creator is used as a PropType', function() {
     spyOn(console, 'error');
 
diff --git a/src/isomorphic/classic/types/ReactPropTypes.js b/src/isomorphic/classic/types/ReactPropTypes.js
index 99c036496aa..d9b68426928 100644
--- a/src/isomorphic/classic/types/ReactPropTypes.js
+++ b/src/isomorphic/classic/types/ReactPropTypes.js
@@ -116,10 +116,13 @@ function createChainableTypeChecker(validate) {
     if (props[propName] == null) {
       var locationName = ReactPropTypeLocationNames[location];
       if (isRequired) {
-        return new Error(
-          `Required ${locationName} \`${propFullName}\` was not specified in ` +
-          `\`${componentName}\`.`
-        );
+        var message = `Required ${locationName} \`${propFullName}\` was not specified in ` +
+          `\`${componentName}\`.`;
+        var lowerPropName = propName.toLowerCase();
+        if (props[lowerPropName] != null) {
+          message += ` Did you mistype \`${lowerPropName}\`?`
+        }
+        return new Error(message);
       }
       return null;
     } else {