iterates subreddits into sidebar

src/features/posts/Feed.js

@@ -28,7 +28,7 @@ export default function Feed() {
                             ups={post.data.ups}
                             comments={post.data.num_comments}
                             time={post.data.created_utc}
-                            id={v4()}
+                            key={v4()}
                             media={post.data.post_hint === 'image' && post.data.url}
                             permalink={post.data.permalink}
                             selftext={post.data.selftext}

src/features/posts/Post.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import './Post.css';
 
-export default function Post({title,author,subreddit,ups,comments,time,id,media,permalink,selftext,video}) {
+export default function Post({title,author,subreddit,ups,comments,time,key,media,permalink,selftext,video}) {
     const limit = 300;
     const [body, setBody] = useState(selftext);
     

src/features/sidebar/Sidebar.js

@@ -1,12 +1,33 @@
-import React from "react";
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { selectAllSubs } from "../reddit/redditSlice";
 
 export default function Sidebar({isCollapsed}) {
+    const allSubs = useSelector(selectAllSubs);
+    let arrayOfSubs = Object.keys(allSubs);
+    const [subs, setSubs] = useState(arrayOfSubs);
+    const [searchSubs, setSearchSubs] = useState('');
+
+    const handleChange = (e) => {
+        e.preventDefault();
+        if (e.target.value) {
+            setSearchSubs(e.target.value);
+        }
+    }
+
     return (
         <div className={isCollapsed ? 'sidebar-hidden' : 'sidebar'}>
-            <p>Hard coded subreddit</p>
-            <p>Hard coded subreddit</p>
-            <p>Hard coded subreddit</p>
-            <p>Hard coded subreddit</p>
+            {
+                subs.map((sub) => {
+                    return (
+                        <div className="individual-sub">
+                            <button className="toggle-sub-active">X</button>
+                            <p>{sub}</p>
+                        </div>
+                    )
+                })
+            }
+            <input type="text" onChange={()=>{}} placeholder="Search Subs to Add"></input>
         </div>
     );
 }