added map method to render game action

Author: Anna Lindgren

code/src/components/GameScreen.js

@@ -4,22 +4,26 @@ import { useSelector } from 'react-redux'
 const GameScreen = () => {
   const userActions = useSelector(store => store.games.username)
   // console.log(userActions)
-  
+
   const games = useSelector(store => store.games.username.actions)
+  // const games = useSelector(store => store.games)
   console.log(games)
 
+
+  //The optional chaining operator (?.) 
+  //enables you to read the value of a property located deep within 
+  //a chain of connected objects without having to check that each reference 
+  //in the chain is valid.
   return (
     <div>
       <h3>{userActions.description}</h3>
-      {/* <p>{games.description}</p> */}
-{/*         {userActions.map(action => (
-          <button
-            key={action}  
-            onClick=""
-          >
-              {action}
-          </button>
-      ))} */}
+        {games?.map( (game, index) => (
+            <div key={index}>
+              <p>{game.description}</p>
+              <button>{game.direction}</button>
+            </div>
+          )
+        )}
     </div>
   )
 }

code/src/reducers/games.js

@@ -5,7 +5,7 @@ export const games  = createSlice({
     initialState: {
         coordinates: null,
         description: null,
-        actions:[],
+        // actions:[],
         username: ''
     },
     reducers: {