Fix console warning for component attribute type (#60)

* Fix console warning for component attribute type

* Bump version

.eslintrc

@@ -6,5 +6,8 @@
     "object-curly-newline": 0,
     "react/destructuring-assignment": 0,
     "react/jsx-one-expression-per-line": 0
+  },
+  "globals": {
+    "jest": "writeable"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-breadcrumbs-hoc",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Just a tiny, flexible, higher order component for rendering breadcrumbs with react-router 4.x",
   "repository": "icd2k3/react-router-breadcrumbs-hoc",
   "keywords": [

src/index.js

@@ -29,7 +29,24 @@ const NO_BREADCRUMB = 'NO_BREADCRUMB';
  * Renders and returns the breadcrumb complete
  * with `match`, `location`, and `key` props.
  */
-const render = ({ breadcrumb, match, location, ...rest }) => {
+const render = ({
+  /**
+   * extracting `component` here to avoid an invalid attribute warning
+   * see: https://github.com/icd2k3/react-router-breadcrumbs-hoc/issues/59
+   * This is actually a symptom of a larger issue with this current
+   * functionality of passing route data (needed for breadcrumb rendering)
+   * as props on the component itself. This has the unintended side-effect
+   * of rendering those props as element attributes in the DOM.
+   * TODO: Refactor this render logic (and probably the API) to not render
+   * those props as attributes on the breadcrumb element.
+   */
+  component,
+
+  breadcrumb,
+  match,
+  location,
+  ...rest
+}) => {
   const componentProps = { match, location, key: match.url, ...rest };
   if (typeof breadcrumb === 'function') {
     return createElement(breadcrumb, componentProps);

src/index.test.js

@@ -195,6 +195,19 @@ describe('react-router-breadcrumbs-hoc', () => {
       const { breadcrumbs } = render({ pathname: '/one/two/three', routes });
       expect(breadcrumbs).toBe('Home / One / TwoCustom / ThreeCustom');
     });
+
+    it('Should not produce a console warning for unsupported element attributes', () => {
+      // see: https://github.com/icd2k3/react-router-breadcrumbs-hoc/issues/59
+      global.console.error = jest.fn();
+      const routes = [
+        { path: '/one', breadcrumb: 'OneCustom', component: () => <span>One Page</span> },
+        { path: '/one/two', component: () => <span>Two Page</span> },
+      ];
+      const { breadcrumbs } = render({ pathname: '/one/two', routes });
+      expect(breadcrumbs).toBe('Home / OneCustom / Two');
+      // eslint-disable-next-line no-console
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   describe('Defaults', () => {