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.

<Routes>
    <Route exact path='/' render={() => (
      <React.Fragment>{content}</React.Fragment>
    )} />

    <Route exact path='/:postId' render={() => (
      <React.Fragment>{postContent}</React.Fragment>
    )} />
    {/* <Navigate to='/' /> */}
  </Routes>

Here is the latest branch of my code:

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

https://bunnyreddit.netlify.app/

@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>
        <Header />
      </header>
      <main className="App">
        <FilterBar />
        <Outlet />
      </main>
    </>
  );
};

export default Layout;

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

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

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?

Thanks