fix/refac(list-item/home): refactored list item component to receive …

…a pokemon prop. resolved issue #4
Alexg1021 · Apr 22, 2021 · 944c9ea · 944c9ea
1 parent 243c9bd
commit 944c9ea
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 31 deletions.
diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx
@@ -2,24 +2,23 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 interface ListItemProps {
-  poke: Pokemon;
-  index: number;
+  pokemon: Pokemon;
 }
 
-const ListItem: React.FC<ListItemProps> = ({ poke, index }) => {
+const ListItem: React.FC<ListItemProps> = ({ pokemon }) => {
   return (
-    <li
-      className='list-group-item d-flex justify-content-around align-items-center'
-      key={index}>
+    <li className='list-group-item d-flex justify-content-around align-items-center'>
       {/* section img pulled to left */}
-      <img src={poke.img} alt={poke.name} />
+      <img src={pokemon.img} alt={pokemon.name} />
       <div className='poke-info'>
         <h2>
-          <Link to={`/pokemon/${poke.name.toLowerCase()}`}>{poke.name}</Link>
+          <Link to={`/pokemon/${pokemon.name.toLowerCase()}`}>
+            {pokemon.name}
+          </Link>
         </h2>
         <div>
-          <small>Height: {poke.height}</small>
-          <small>Weight: {poke.weight}</small>
+          <small>Height: {pokemon.height}</small>
+          <small>Weight: {pokemon.weight}</small>
         </div>
       </div>
       {/* section pokemon name that is wrapped in a link */}

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, ChangeEvent } from 'react';
 import { Link } from 'react-router-dom';
 import { pokemonData } from '../data/pokemonData';
+import ListItem from '../components/ListItem';
 
 const HomePage: React.FC = () => {
   const [pokemon, setPokemon] = useState<Pokemon[]>(pokemonData);
@@ -52,27 +53,7 @@ const HomePage: React.FC = () => {
         <div className='col'>
           <ul className='list-group'>
             {pokemon.map((poke, index) => {
-              return (
-                <li
-                  className='list-group-item d-flex justify-content-around align-items-center'
-                  key={index}>
-                  {/* section img pulled to left */}
-                  <img src={poke.img} alt={poke.name} />
-                  <div className='poke-info'>
-                    <h2>
-                      <Link to={`/pokemon/${poke.name.toLowerCase()}`}>
-                        {poke.name}
-                      </Link>
-                    </h2>
-                    <div>
-                      <small>Height: {poke.height}</small>
-                      <small>Weight: {poke.weight}</small>
-                    </div>
-                  </div>
-                  {/* section pokemon name that is wrapped in a link */}
-                  {/* section for details under the pokemon name */}
-                </li>
-              );
+              return <ListItem pokemon={poke} key={index} />;
             })}
           </ul>
         </div>