fix(attributes-to-props): convert attrib to uncontrolled component prop

Fixes #321

Author: remarkablemark

lib/attributes-to-props.js

@@ -28,11 +28,19 @@ module.exports = function attributesToProps(attributes) {
 
     // convert HTML/SVG attribute to React prop
     attributeNameLowerCased = attributeName.toLowerCase();
-    propName = reactProperty.possibleStandardNames[attributeNameLowerCased];
+    propName = getPropName(attributeNameLowerCased);
 
     if (propName) {
-      props[propName] = attributeValue;
       propertyInfo = reactProperty.getPropertyInfo(propName);
+
+      // convert attribute to uncontrolled component prop (e.g., `value` to `defaultValue`)
+      // https://reactjs.org/docs/uncontrolled-components.html
+      if (propName === 'checked' || propName === 'value') {
+        propName = getPropName('default' + attributeNameLowerCased);
+      }
+
+      props[propName] = attributeValue;
+
       switch (propertyInfo && propertyInfo.type) {
         case reactProperty.BOOLEAN:
           props[propName] = true;
@@ -57,3 +65,13 @@ module.exports = function attributesToProps(attributes) {
 
   return props;
 };
+
+/**
+ * Gets prop name from lowercased attribute name.
+ *
+ * @param {string} attributeName - Lowercased attribute name.
+ * @return {string}
+ */
+function getPropName(attributeName) {
+  return reactProperty.possibleStandardNames[attributeName];
+}

test/__snapshots__/attributes-to-props.test.js.snap

@@ -31,9 +31,9 @@ Object {
   "async": true,
   "autoFocus": true,
   "autoPlay": true,
-  "checked": true,
   "controls": true,
   "default": true,
+  "defaultChecked": true,
   "disabled": true,
   "draggable": "false",
   "formNoValidate": true,

test/attributes-to-props.test.js

@@ -103,6 +103,18 @@ describe('attributesToProps with HTML attribute', () => {
   ])('converts overloaded boolean attribute: %p', (attributes, props) => {
     expect(attributesToProps(attributes)).toEqual(props);
   });
+
+  it.each([
+    [{ checked: '' }, { defaultChecked: true }],
+    [{ checked: 'checked' }, { defaultChecked: true }],
+    [{ value: '' }, { defaultValue: '' }],
+    [{ value: 'foo' }, { defaultValue: 'foo' }]
+  ])(
+    'converts form attribute to uncontrolled component property',
+    (attributes, props) => {
+      expect(attributesToProps(attributes)).toEqual(props);
+    }
+  );
 });
 
 describe('attributesToProps with SVG attribute', () => {