0

I'm attempting to use an onClick listener for dynamically created blog posts to direct the user to the blog post page and render the posts contents. I originally wanted to use a custom hook but have tried to centralize things so you can see what I'm doing.

import { useState } from 'react';
import { Link } from 'react-router-dom';
import Card from '../../shared/components/UIElements/Card';

import { useBlog } from '../../shared/hooks/blog-hook';

const BlogContainer = () => {
  const { blogs } = useBlog()
  const [blogID, setBlogID] = useState(null);
  const getBlogID = () => {
    setBlogID(blogID);
  };
  const displayBlogs = blogs.map((blog) => {
    return (
      <Link
        onClick={getBlogID}
        to={`/${blog.key}`}
        key={blog.key}
      >
        <Card className="mapped">
          <h2>{blog.title}</h2>
          <h4>{blog.description}</h4>
        </Card>
      </Link>
    );
  });
  return <div className="blog-container">{displayBlogs}</div>;
};

export default BlogContainer;

import { useBlog } from '../../shared/hooks/blog-hook';
const BlogPost = () => {
  const { blogID } = useBlog();
  return (
    <>
      <h1>{`${blogs[blogID]}`}</h1>
    </>
  );
};

export default BlogPost;

What should happen is when a blog is clicked, it sets blog.key to blogID, which then is used to identify the specific blog on the blog page to be displayed. The problem is when I click a blog link it doesn't setBlogID at all, let alone to the blog clicked on. I've tried it with and without "this." in setBlogID, and both using/not using an anonymous function, but I get the same results. The console is logging blogID as "null".

Edits: removed () => from onClick, removed this. from setBlogID, added blog post page for reference.

HarrySIV
  • 115
  • 9
  • 1
    What is `blogID` supposed to be used for? `blogID` isn't referenced anywhere. In your code you've also a few other issues: (1) `() => getBlogID` doesn't invoke `getBlogId` , (2) in `getBlogID` `this` is reference to the function, so `this.blogID` is undefined, and (3) React state updates are asynchronously processed, so you can't console log the state immediately after enqueueing an update as the state has yet to update. – Drew Reese Jul 08 '22 at 04:39
  • blogID is the index of the specific blog so I can use it on the blog_post page to find the blog clicked. As to 3, how do I get a hook to update once the state has updated asynchronously. Again, I'm trying to use a custom hook and I've tried using useEffect but it doesn't seem to be working. It always returns back as null. – HarrySIV Jul 08 '22 at 04:55
  • 1
    It doesn't make any sense that you are trying to set the `blogID` state to its own value. It would make more sense to use the `blog.key` for the route (*like you are*). Is `BlogPost` being rendered on a route where the `blogID` is a route path param? You would use this to access the correct blog entry. What hook are you trying to update? If you need to do something in response to another value updating, use the `useEffect` hook with proper dependency array to issue a side-effect. – Drew Reese Jul 08 '22 at 06:14
  • I took what you said and changed how I was getting the blog id. It's jank but I use the url to grab which index should be displayed on the page. Thank you so much for the help! – HarrySIV Jul 08 '22 at 07:29

0 Answers0