Added list

React/test-feed/src/App.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import { Home } from './pages/Home'
 import { Nav } from './components/Nav'

React/test-feed/src/components/FeedItem.js

@@ -1,7 +1,17 @@
 import React from 'react'
+import {FaTimes} from 'react-icons/fa'
+import { Card } from './shared/Card'
 
-export const FeedItem = () => {
+export const FeedItem = ({feed}) => {
   return (
-    <div>FeedItem</div>
+    <Card>
+      <div className="num-display">{feed.rating}</div>
+      <FaTimes
+        color="red"
+        className="close"
+      />
+      <div className="text-display">{feed.text}</div>
+      {/* <button onClick={onClick}>click</button> */}
+    </Card>
   )
 }

React/test-feed/src/components/FeedList.js

@@ -1,8 +1,14 @@
 import React from 'react'
+import { FeedItem } from './FeedItem'
 
-export const FeedList = () => {
+export const FeedList = ({ feed }) => {
   return (
     <div className="feedback-list">
+      {
+        feed.map((f) => (
+          <FeedItem feed={f} />
+        ))
+      }
     </div>
   )
 }

React/test-feed/src/components/FeedStat.js

@@ -1,10 +1,14 @@
 import React, { useEffect } from 'react'
 
-export const FeedStat = ({feed}) => {
-  useEffect(() => {
-console.log(feed)
-  }, [])
+export const FeedStat = ({ feed }) => {
+  let avg = feed.reduce((acc, cur) => {
+    return acc + cur.rating
+  }, 0) / 3
+  avg = avg.toFixed(2)
   return (
-    <div>FeedStat</div>
+    <div className="feedback-stats">
+      <h4>{feed.length} Reviews</h4>
+      <h4>Average rating: {isNaN(avg) ? 0 : avg}</h4>
+    </div>
   )
 }

React/test-feed/src/data/feed.js

@@ -14,4 +14,6 @@ const Feed = [
     rating: 8,
     text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. consequuntur vel vitae commodi alias voluptatem est voluptatum ipsa quae.',
   },
-]
+]
+
+export default Feed

React/test-feed/src/pages/Home.js

@@ -7,15 +7,15 @@ import Feed from '../data/Feed'
 
 export const Home = () => {
   const [feed, setFeed] = useState(Feed)
-  useEffect(() => {    
+  useEffect(() => {
     console.log(feed)
   }, [])
 
   return (
     <div className='container'>
       <FeedStat feed={feed} />
       <FeedForm />
-      <FeedList />
+      <FeedList feed={feed} />
     </div>
   )
 }