Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why isn't the 'Message Seller' button in my React component navigating to the desired page?

I’m working on a React application.
I have a PostFooter component responsible for displaying various functionalities related to a post, such as liking the post, commenting on it, and messaging the seller.
I’m encountering an issue with the handleButtonClick function, which is intended to navigate to another page (ChatPage) when the "Message Seller" button is clicked.

The handleButtonClick function inside my PostFooter component is not navigating to the desired page (./pages/ChatPage/ChatPage) when the "Message Seller" button is clicked. How can I properly implement the navigation functionality in this scenario?

here is some of my code

import { Box, Button, Flex, Input, InputGroup, InputRightElement, Text, useDisclosure } from "@chakra-ui/react";
import { useRef, useState } from "react";
import { CommentLogo, NotificationsLogo, UnlikeLogo } from "../../assets/constants";
import usePostComment from "../../hooks/usePostComment";
import useAuthStore from "../../store/authStore";
import PropTypes from 'prop-types';
import {useNavigate } from 'react-router-dom';
import useLikePost from "../../hooks/useLikePost";
import { timeAgo } from "../../utils/timeAgo";
import CommentsModal from "../Modals/CommentsModal";

const PostFooter = ({ post, isProfilePage, creatorProfile }) => {
    const { isCommenting, handlePostComment } = usePostComment();
    const [comment, setComment] = useState("");
    const [caption, setCaption] = useState("");
    const [description, setDescription] = useState("");
    const [selectedCategory, setSelectedCategory] = useState("");
    const [selectedCondition, setSelectedCondition] = useState("");
    const [price, setPrice] = useState("");
    const authUser = useAuthStore((state) => state.user);
    const commentRef = useRef(null);
    const { handleLikePost, isLiked, likes } = useLikePost(post);
    const { isOpen, onOpen, onClose } = useDisclosure();

    const handleSubmitComment = async () => {
        await handlePostComment(post.id, comment);
        setComment("");
    };

    const handleButtonClick = () => {
        const navigate = useNavigate;
        // Navigate to another page when the button is clicked
        navigate("./pages/ChatPage/ChatPage");
    };

    return (
        <Box mb={10} marginTop={"auto"}>
            <Flex alignItems={"center"} gap={4} w={"full"} pt={0} mb={2} mt={4}>
                <Box onClick={handleLikePost} cursor={"pointer"} fontSize={18}>
                    {!isLiked ? <NotificationsLogo /> : <UnlikeLogo />}
                </Box>
                <Box cursor={"pointer"} fontSize={18} onClick={() => commentRef.current.focus()}>
                    <CommentLogo />
                </Box>
                <Box>
                    <Button fontSize={18} colorScheme="blue" onClick={handleButtonClick}>Message Seller</Button>
                </Box>
            </Flex>
            <Text fontWeight={600} fontSize={"sm"}>
                {likes} likes
            </Text>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    const navigate = useNavigate(); should be outside the function

    const navigate = useNavigate();

    const handleSubmitComment = async () => {
    await handlePostComment(post.id, comment);
    setComment("");
};
const handleButtonClick = () => {
    navigate("/Chat");
};

  2. 0

    The react-router-dom useNavigate hook needs to be called as a function to get the navigation function, but in your code, you are missing the parentheses. It should be like this:

           const handleButtonClick = () => {
        const navigate = useNavigate();
        navigate("./pages/ChatPage/ChatPage");
    };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search