title: I want to stop producing cells at 12 elements and save the remainder for another page
body: <p>The problem I have is that I am generating each cell component within the return. I'm really not sure how i can get around this.</p>
  
  <pre><code>import React from 'react';
  import PokeCell from './PokeCell';
  import './styles/PokeList.css';
  
  const PokeList = (props) =&gt; {
  
  
  
      return (
          &lt;section className="poke-list"&gt;
              {props.pokemon.map((pokemon, index) =&gt; (
                  &lt;PokeCell 
                      key={pokemon.id + index}
                      id={pokemon.id}
                      name={pokemon.name}
                      image={pokemon.image}
                  /&gt;
              ))}
          &lt;/section&gt;
      )
  }
  
  export default PokeList;
  </code></pre>