PartnersComponent: Pass filename instead of whole image component

Author: DanKhoo

src/components/home/partners/LogoComponent.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 
+import Image from '../../image';
+
 import { withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 
@@ -11,16 +13,24 @@ const styles = theme => ({
     position: 'relative',
     width: '100%',
   },
+  logoImage: {
+    maxHeight: '100%',
+    '& img': {
+      objectFit: 'contain !important',
+    },
+  },
 });
 
 class LogoComponent extends Component {
   render() {
-    const { Logo } = this.props;
+    const { filename } = this.props;
     const { classes } = this.props;
 
     return (
       <Grid item xs={5} sm={5} className={classes.root}>
-        <div className={classes.logo}>{Logo}</div>
+        <div className={classes.logo}>
+          <Image filename={filename} classProps={classes.logoImage} />
+        </div>
       </Grid>
     );
   }

src/components/home/partners/PartnersComponent.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import Image from '../../image';
 
 import LogoComponent from './LogoComponent';
 
@@ -23,12 +22,6 @@ const styles = theme => ({
       lineHeight: 1.5,
     },
   },
-  logoImage: {
-    maxHeight: '100%',
-    '& img': {
-      objectFit: 'contain !important',
-    },
-  },
 });
 
 class PartnersComponent extends Component {
@@ -41,26 +34,10 @@ class PartnersComponent extends Component {
           Awesome Partners
         </Typography>
         <Grid container justify="space-around">
-          <LogoComponent
-            Logo={
-              <Image filename={'google.png'} classProps={classes.logoImage} />
-            }
-          />
-          <LogoComponent
-            Logo={
-              <Image filename={'google.png'} classProps={classes.logoImage} />
-            }
-          />
-          <LogoComponent
-            Logo={
-              <Image filename={'google.png'} classProps={classes.logoImage} />
-            }
-          />
-          <LogoComponent
-            Logo={
-              <Image filename={'google.png'} classProps={classes.logoImage} />
-            }
-          />
+          <LogoComponent filename={'google.png'} />
+          <LogoComponent filename={'google.png'} />
+          <LogoComponent filename={'google.png'} />
+          <LogoComponent filename={'google.png'} />
         </Grid>
       </div>
     );