How to render reddit api data

I am trying to make a reddit app using React and the reddit api for this final project. I am struggling to actually render the posts to the screen but have managed to access the posts from the api.

I can log the contents to the console as seen in this image: Console log object

I think it has to do with this section of my code but not 100% sure as still not too sure how to debug issues where I have only just learned React and Redux etc.

    <Route exact path='/' render={() => (
    )} />

    <Route exact path='/:postId' render={() => (
    )} />
    {/* <Navigate to='/' /> */}

Here is the latest branch of my code:

Here is a live version of my site (Not fully up to date):

@owka54 I am not sure if you issue is related to this, but I believe with React Router v6 you should use a layout element to handle the display of fixed content. And then in the layout element you display the variable content in the Outlet.

For example:

import { Outlet } from "react-router";
import FilterBar from "./FilterBar";
import Header from "./Header";
const Layout = () => {
  return (
        <Header />
      <main className="App">
        <FilterBar />
        <Outlet />

export default Layout;

This layout is then in your App.js file, for example:

function App() {
  return (
      <Route path="/" element={<Layout />}>
        <Route index element={<MainPosts />} />
        <Route path="*" element={<Navigate to="/" replace />} />
        <Route path="author">
          <Route path=":authorId" element={<AuthorPosts />} />
        <Route path="post">
          <Route path=":postId" element={<PostPage />} />
        <Route path="subreddit">
          <Route path=":subreddit" element={<SubredditPosts />} />

Thank you this helped.

I found another bug which must be the reason it’s not working mainly, my props aren’t being passed correctly or I am not accessing them correctly.

So I pass props like this to PostContainer:

postContent = (<PostContainer data={data} error={error} status={status} comments='display' />)

But when I console.log(props) in PostContainer I get this output:

Am I passing the props incorrectly or do I need to access them in a different way?