import React from 'react';
import GifItem from './GifItem';
import ListInfo from '../containers/ListInfo';
import Spinner from './Spinner';
import '../styles/List.css';

const GifList = ({ answersSubmitted, tags, gifs, isFetchingGifs }) => {
  return (
    <ul className='list gif-list'>
      { answersSubmitted ?
          tags.map((t, i) =>
            <GifItem
              key={i}
              value={ t.isInCorrectPosition ? '+25!' : '❌' }
              />
          )
        : gifs.length !== 4 || isFetchingGifs ?
            <GifItem
              key={Math.random()}
              value={<Spinner />}
              />
            :

        gifs.map((g, i) =>
          <GifItem
            key={i}
            value={g}
            />
        )
      }
    </ul>
  );
};

export default ListInfo(GifList);

@@ -163,16 +163,107 @@
 .css';%0A%0A
+//gifs must be background images!%0A//or use the still!%0A//(so text can be displayed on top)%0A%0A
 const Gi
@@ -317,16 +317,32 @@
 hingGifs
+, correctAnswers
  %7D) =%3E %7B
@@ -425,19 +425,19 @@
         
-tag
+gif
 s.map((t
@@ -505,17 +505,23 @@
     
-value=%7B t
+winner=%7Btags%5Bi%5D
 .isI
@@ -540,25 +540,38 @@
 tion
- ? '+25!' : '%E2%9D%8C' %7D
+%7D%0A              gif=%7Bgifs%5Bi%5D%7D%0A
 %0A   

add notes