fixup! fixup! fixup! fixup! Update blacklisted props that can be pass…

…ed to native HTML elements using the transferProps principle

src/components/_helpers/__tests__/transferProps.test.js

@@ -5,7 +5,6 @@ describe('transferProps', () => {
     const props = {
       propA: 'value',
       propB: 'value',
-      propC: 'value',
     };
     const expectedProps = { ...props };
 
@@ -14,21 +13,19 @@ describe('transferProps', () => {
 
   it('returns filtered props using always blacklisted props', () => {
     const props = {
-      children: 'value',
       className: 'value',
-      ref: 'value',
-      staticContext: 'value',
+      contentEditable: true,
+      propA: 'value',
     };
-    const expectedProps = {};
-    let errorString;
+    const expectedProps = { propA: 'value' };
 
+    let errorString;
     const originalConsoleError = console.error;
-
     console.error = (error) => {
       errorString = error;
     };
     expect(transferProps(props)).toEqual(expectedProps);
-    expect(errorString).toEqual('Invalid prop(s) supplied to the "transferProps" function: "children", "className", "ref", "staticContext"');
+    expect(errorString).toEqual('Invalid prop(s) supplied to the "transferProps" function: "className", "contentEditable"');
 
     console.error = originalConsoleError;
   });

src/components/_helpers/transferProps.js

@@ -7,7 +7,7 @@
  *
  * When run in development mode, the function will log the error to the console if any invalid props are passed.
  *
- * @param props The props that were passed to the React component
+ * @param props The props that were passed to the React component and were not used by it
  * @returns The props to be passed to the HTML element
  */
 export const transferProps = (props) => {
@@ -24,15 +24,16 @@ export const transferProps = (props) => {
   } = props;
 
   if (process.env.NODE_ENV !== 'production') {
+    console.log('props', props);
     const invalidProps = [
-      'children',
-      'className',
-      'contentEditable',
-      'dangerouslySetInnerHTML',
-      'ref',
-      'staticContext',
-      'style',
-      'suppressContentEditableWarning',
+      'children', // It is always either handled by the component itself or not supported.
+      'className', // Classes are set by component authors, changing it arbitrarily might break things.
+      'contentEditable', // Components are either interactive or not, changing it arbitrarily might break things.
+      'dangerouslySetInnerHTML', // This might break things and allow for XSS attacks.
+      'ref', // Forwarding `ref` is hardcoded and documented for each component.
+      'staticContext', // In `react-router` (v4, v5) this is used during server side rendering, it makes no sense to pass it to a component.
+      'style', // Styles are set by component authors, changing it arbitrarily might break things.
+      'suppressContentEditableWarning', // Since setting `contentEditable` is not allowed, this is not needed.
     ]
       .filter((key) => props[key] !== undefined);