Update

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

@@ -1,14 +1,24 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { FeedRating } from './FeedRating'
 import { Card } from './shared/Card'
 import { Button } from './shared/Button'
 import FeedContext from '../context/FeedContext'
 
 export const FeedForm = () => {
-  const { addFeed } = useContext(FeedContext)
+  const { addFeed, editFeed, selectEdit } = useContext(FeedContext)
   const [text, setText] = useState('')
   const [rating, setRating] = useState(0)
   const [btnDisabled, setBtnDisabled] = useState(true)
+
+  useEffect(() => {
+    console.log(selectEdit)
+    if (selectEdit.isEdit) {
+      const { feed } = selectEdit
+      setRating(feed.rating)
+      setText(feed.text)
+    }
+  }, [selectEdit])
+
   const handleChange = (e) => {
     setText(e.target.value)
     if (e.target.value.length > 10) {

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

@@ -4,7 +4,7 @@ import { Card } from './shared/Card'
 import FeedContext from '../context/FeedContext'
 
 export const FeedItem = ({ feed }) => {
-  const { deleteFeed, editFeed } = useContext(FeedContext)
+  const { deleteFeed, editFeed, handleSelectedFeed } = useContext(FeedContext)
   return (
     <Card>
       <div className="num-display">{feed.rating}</div>
@@ -16,7 +16,7 @@ export const FeedItem = ({ feed }) => {
       <FaEdit
         color="blue"
         className="edit"
-        onClick={() => editFeed()}
+        onClick={() => handleSelectedFeed(feed)}
       />
       <div className="text-display">{feed.text}</div>
       {/* <button onClick={onClick}>click</button> */}

React/test-feed/src/context/FeedContext.js

@@ -1,10 +1,15 @@
-import React, { createContext,  useState } from 'react'
+import React, { createContext, useState } from 'react'
 import Feed from '../data/Feed'
 
 const FeedContext = createContext()
 
 export const FeedContextProvider = (props) => {
-  const [feed, setFeed] = useState(Feed)  
+  const [feed, setFeed] = useState(Feed)
+  const [selectEdit, setSelectEdit] = useState({
+    isEdit: false,
+    feed: {
+    }
+  })
 
   const deleteFeed = (id) => {
     setFeed(feed.filter(f => f.id !== id))
@@ -13,12 +18,27 @@ export const FeedContextProvider = (props) => {
   const addFeed = (newFeed) => {
     setFeed([newFeed, ...feed])
   }
+
+  const editFeed = (updatedFeed) => {
+    setFeed(feed.map(f => f.id == updatedFeed.id ? { ...f, updatedFeed } : { ...f }))
+  }
+
+  const handleSelectedFeed = (feed) => {
+    setSelectEdit({
+      isEdit: true,
+      feed
+    })
+  }
+
   return (
     <FeedContext.Provider
       value={{
         feed,
+        selectEdit,
+        handleSelectedFeed,
         addFeed,
-        deleteFeed
+        deleteFeed,
+        editFeed
       }}
     >
       {props.children}