Updated our menu-itmes to navigate withROuter HOC

src/components/directory/directory.component.jsx

@@ -1,58 +1,58 @@
 import React from 'react';
 
-import MenuItem from '../menu-item/menu-item.component'
-import './directory.styles.scss'
+import MenuItem from '../menu-item/menu-item.component';
+import './directory.styles.scss';
 
 class Directory extends React.Component {
-    constructor() {
-        super();
+  constructor() {
+    super();
 
-        this.state = {
-            sections: [{
-                title: 'hats',
-                imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
-                id: 1,
-                linkUrl: 'shop/hats'
-            },
-            {
-                title: 'jackets',
-                imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png',
-                id: 2,
-                linkUrl: 'shop/jackets'
-            },
-            {
-                title: 'sneakers',
-                imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png',
-                id: 3,
-                linkUrl: 'shop/sneakers'
-            },
-            {
-                title: 'womens',
-                imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png',
-                size: 'large',
-                id: 4,
-                linkUrl: 'shop/womens'
-            },
-            {
-                title: 'mens',
-                imageUrl: 'https://i.ibb.co/R70vBrQ/men.png',
-                size: 'large',
-                id: 5,
-                linkUrl: 'shop/mens'
-            }]
-        }
-    }
-    render() {
-        return (
-            <div className="directory-menu">
-                {
-                    this.state.sections.map(({ title, imageUrl, id, size }) => (
-                        <MenuItem key={id} title={title} imageUrl={imageUrl} size={size} />
-                    ))
-                }
-            </div>
-        );
-    }
+    this.state = {
+      sections: [
+        {
+          title: 'hats',
+          imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
+          id: 1,
+          linkUrl: 'shop/hats',
+        },
+        {
+          title: 'jackets',
+          imageUrl: 'https://i.ibb.co/px2tCc3/jackets.png',
+          id: 2,
+          linkUrl: 'shop/jackets',
+        },
+        {
+          title: 'sneakers',
+          imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png',
+          id: 3,
+          linkUrl: 'shop/sneakers',
+        },
+        {
+          title: 'womens',
+          imageUrl: 'https://i.ibb.co/GCCdy8t/womens.png',
+          size: 'large',
+          id: 4,
+          linkUrl: 'shop/womens',
+        },
+        {
+          title: 'mens',
+          imageUrl: 'https://i.ibb.co/R70vBrQ/men.png',
+          size: 'large',
+          id: 5,
+          linkUrl: 'shop/mens',
+        },
+      ],
+    };
+  }
+  render() {
+    return (
+      <div className='directory-menu'>
+        {this.state.sections.map(({ id, ...otherSectionPRops }) => (
+          <MenuItem key={id} {...otherSectionPRops} />
+        ))}
+      </div>
+    );
+  }
 }
 
-export default Directory;
+export default Directory;

src/components/menu-item/menu-item.component.jsx

@@ -1,22 +1,24 @@
 import React from 'react';
+import { withRouter } from 'react-router-dom';
 
-import './menu-item.styles.scss'
+import './menu-item.styles.scss';
 
-const MenuItem = ({ title, imageUrl, size }) => (
+const MenuItem = ({ title, imageUrl, size, history, linkUrl, match }) => (
+  <div
+    className={`${size} menu-item`}
+    onClick={() => history.push(`${match.url}${linkUrl}`)}
+  >
     <div
-        className={`${size} menu-item`}
-    >
-        <div
-            className="background-image"
-            style={{
-                backgroundImage: `url(${imageUrl})`
-            }}
-        />
-        <div className="content">
-            <h1 className="title">{title.toUpperCase()}</h1>
-            <span className="subtitle">SHOP NOW</span>
-        </div>
+      className='background-image'
+      style={{
+        backgroundImage: `url(${imageUrl})`,
+      }}
+    />
+    <div className='content'>
+      <h1 className='title'>{title.toUpperCase()}</h1>
+      <span className='subtitle'>SHOP NOW</span>
     </div>
-)
+  </div>
+);
 
-export default MenuItem;
+export default withRouter(MenuItem);