Cant get onClick event to work for changing posts , Reddit Client

I have been struggling with this problem for days and at this point I am frustrated. Nothing I have tried is working. I am trying to change the subreddit when you click on a subreddit.
full code : https://github.com/EmmaSecrest/redditApp
feed.js

import { useSelector , useDispatch} from "react-redux";
import { useEffect } from "react";
import { selectFeed } from "./feedSlice";
import { getPosts } from "./feedSlice";
// import {selectSubreddit, subredditsReducer} from '../subreddits/subredditSlice'
import "./feed.css"
import '../subreddits/Subreddit'
import { selectSelectedSubreddit } from "../subreddits/subredditSlice";
// import { isLoading } from "./feedSlice";
// import Subreddits from "../subreddits/Subreddit";


export default function Feed() {
    // const subreddits = useSelector(selectSubreddit);
    const feed = useSelector(selectFeed);
    const dispatch = useDispatch()

  
    
    useEffect(() => {
    
        dispatch(getPosts(selectSelectedSubreddit))
    
    },[dispatch])



// if(isLoading) return <div>Loading</div>
// if(!feed) return null; 


function commentClick(){
   //place a use effect here for comments
 } 


    return (
        
        <section>

            <ul className = 'posts'>
        {feed.map((post, index) => (
            <li className = 'feed'key = {index} >
                r/{post.subreddit}<br/>
                <h2>{post.title}</h2>
                {/*less of a space here */}
                u/{post.author_fullname} <br />
                {post.selftext? post.selftext: null} <br/>
                {post.url? <a href = {post.url} className ='link'>Click me!</a>:null}
                
                { post.post_hint === 'image' &&           
                  <img 
                  alt = ''
                  src = {post.url}
                  className = 'image'
                />
                }
                { post.post_hint === 'video' &&           
                  <video
                  alt = ''
                  src = {post.videoUrl}
                  className = 'image'
                  controls
                  autoPlay
                > video is not supported </video>
                }


                <div className = 'bottom-inline'>
                Upvotes:{post.ups}
                <button onClick ={commentClick}>Comments</button>
                </div>


            </li>

        ))}
    </ul> 
        </section>
    )
}

subredditSlice.js

import { createSlice } from "@reduxjs/toolkit";





const subredditSlice = createSlice({
    name: 'subreddits',
    initialState: { subreddits: [
        {data: {id:1,name: "Home", search:'hot'}},
        {data: {id:1,name: "Memes", search: 'memes'}},
        {data:{id:3,name:"Ask Reddit",search: 'AskReddit'}},
        {data:{id:4, name: 'Aww',search:'aww'}},
        {data:{id:5, name:'Funny', search: 'funny'}},
        {data:{id:6, name: 'SW Galaxy of Heroes',search:'SWGalaxyofHeroes'}},
        {data:{id:7, name: 'Pics',search:'pics'}},
        {data:{id:8, name: 'Music', search: 'music'}},
        {data:{id:9, name: 'No stupid Question',search:'NostupidQuestion'}},
        {data:{id:10, name: "Explain like I'm five", search:'ExplainlikeImfive'}},
        {data:{id:11, name: 'Life Pro Tips',search:'LifeProTips'}},
        {data:{id:12, name: 'Netflix', search:'netflix'}},
        {data:{id:13, name: "Ask Science",search:'askScience'}},
        {data:{id: 14, name: 'BTS',search: 'bangtan'}},
        {data:{id:15, name: 'iPhone',search:'iphone'}},
        {data:{id:16, name:'Android', search: 'android'}},
        {data:{id:17, name: 'Starbucks', search:'starbucks'}},
        {data:{id:18,name: 'Twitch',search:'twitch'}},
        {data:{id:19, name: "Mildy Interesting", search:'MildyInteresting'}},
        {data:{id:20, name: "gaming" , search: 'gaming'}}

    ],
    error: false,
    isLoading: false,
    },
    reducers:{
        addSubreddit(state,action){
           // may need to be adjusted 
            state.subreddits.push(action.payload)
        },
        selectSubredditUpdated(state,action){
            state.selectedSubreddit = action.payload
        }
    },
    
})

export const {addSubreddit, selectSubredditUpdated } = subredditSlice.actions;
export const subredditsReducer = subredditSlice.reducer
export const selectSubreddit = state => state.subreddits.subreddits
export const selectSelectedSubreddit = state => state.subreddits.subreddits.selectSubreddit

feedSlice.js

import { createSlice , createAsyncThunk } from "@reduxjs/toolkit";



export const getPosts = createAsyncThunk('posts/getPosts', 
async (argument) => {
    let res 
    if (argument !== null){
         res = await fetch(`https://www.reddit.com/r/${argument}.json`)     
     } else {
        res = await fetch(`https://www.reddit.com/hot.json`)
     }
    
    
    
    const resJson = await res.json();
    
    return resJson.data.children.map(post=> post.data);
}
)
export const getComments = createAsyncThunk('comments/getComments', 
async () => {
    //adjust this link
    const res = await fetch(``)
    const resJson = await res.json();
    
    return resJson.data.children.map(post=> post.data);
}
)




const feedSlice = createSlice({
    name: 'feed',
    initialState: {
        posts: [],
        feed: [
            // {data: {id:1 , subredditId:1,title: 'title 1' ,post: 'post 1'}},
            // {data: {id:2, subredditId:1, title: "title 2" ,post: 'post 2'}},
            // {data: {id:3, subredditId: 2,title: 'title 3' ,post: "post 3"}},
            // {data: {id:4, subredditId:2,title: 'title 4' ,post:"post 4"}}
        ],
    error: false,
    isLoading: false,
    },
    
    extraReducers: {
      [getPosts.pending] (state,action){
          state.isLoading = true;
          state.error = false;
      },  
      [getPosts.rejected] (state,action){
          state.isLoading = false;
          state.error = true;
      },
      [getPosts.fulfilled](state,action){
          state.isLoading = false;
          state.error = false;
          state.posts = action.payload;
        },
       
      //add an extra reducer for the comments
    }
    
    
    
})
 
 export const feedReducer = feedSlice.reducer
 export const isLoading = (state) => state.feed.isLoading
 export const feedError = (state) => state.feed.error
 export const selectFeed = state => state.feed.posts;
 



feed.js

import { useSelector , useDispatch} from "react-redux";
import { useEffect } from "react";
import { selectFeed } from "./feedSlice";
import { getPosts } from "./feedSlice";
// import {selectSubreddit, subredditsReducer} from '../subreddits/subredditSlice'
import "./feed.css"
import '../subreddits/Subreddit'
import { selectSelectedSubreddit } from "../subreddits/subredditSlice";
// import { isLoading } from "./feedSlice";
// import Subreddits from "../subreddits/Subreddit";


export default function Feed() {
    // const subreddits = useSelector(selectSubreddit);
    const feed = useSelector(selectFeed);
    const dispatch = useDispatch()

  
    
    useEffect(() => {
    
        dispatch(getPosts(selectSelectedSubreddit))
    
    },[dispatch])



// if(isLoading) return <div>Loading</div>
// if(!feed) return null; 


function commentClick(){
   //place a use effect here for comments
 } 


    return (
        
        <section>

            <ul className = 'posts'>
        {feed.map((post, index) => (
            <li className = 'feed'key = {index} >
                r/{post.subreddit}<br/>
                <h2>{post.title}</h2>
                {/*less of a space here */}
                u/{post.author_fullname} <br />
                {post.selftext? post.selftext: null} <br/>
                {post.url? <a href = {post.url} className ='link'>Click me!</a>:null}
                
                { post.post_hint === 'image' &&           
                  <img 
                  alt = ''
                  src = {post.url}
                  className = 'image'
                />
                }
                { post.post_hint === 'video' &&           
                  <video
                  alt = ''
                  src = {post.videoUrl}
                  className = 'image'
                  controls
                  autoPlay
                > video is not supported </video>
                }


                <div className = 'bottom-inline'>
                Upvotes:{post.ups}
                <button onClick ={commentClick}>Comments</button>
                </div>


            </li>

        ))}
    </ul> 
        </section>
    )
}