useNavigate is giving an error -- React Hook "useNavigate that is neither a React function component nor a custom React Hook function

user_15515364 0
Viewed 49
import React from "react";
import { Button, Card } from "react-bootstrap";
import { useNavigate } from "react-router-dom";

const bookCard = ({ book }) => {
  const handleNavigate = id => {
    const navigate = useNavigate();
    navigate(`inventory/${id}`)
  }
  return (
    <div className="col-md-4 my-3 text-start">
      <Card style={{ width: "18rem" }}>
        <Card.Img variant="top" src={book.img} />
        <Card.Body>
          <Card.Title>{book.name}</Card.Title>
          <Card.Text>{book.description}</Card.Text>
          <p>
            <b>Price</b> : {book.price}
          </p>
          <p>
            <b>Quantity</b> : {book.quantity}
          </p>
          <p>
            <b>Supplier</b> : {book.supplier}
          </p>
          <Button onClick={()=>handleNavigate(book._id)} variant="primary">Update Item</Button>
        </Card.Body>
      </Card>
    </div>
  );
};

export default bookCard;

I used useNavigte before but this is the first time i am facing this problem . Here i am trying to use a fucnction for navigationg to my dynamic route setted with my ID .

reactjs
2 Answers

The problem is you're calling useNavigate inside a callback function. You just need to move it outside like so:

const BookCard = ({ book }) => {
  const navigate = useNavigate();
  const handleNavigate = id => {
    navigate(`inventory/${id}`)
  }
...
}
user_182359390

According to the naming convention of React's components, you should capitalize your component like this BookCard (not bookCard - it's considered as a usual function, not a component)

One side note is that all hooks and React life cycles' functions can only be used under a component. In your case, you're using useNavigate (a hook) but not in a component.

One thing I notice that you're calling useNavigate in the event which is not suitable for a hook. You should move it to the top level of the component code instead.

import React from "react";
import { Button, Card } from "react-bootstrap";
import { useNavigate } from "react-router-dom";

const BookCard = ({ book }) => {
  const navigate = useNavigate();
  const handleNavigate = id => {
    navigate(`inventory/${id}`)
  }
  return (
    <div className="col-md-4 my-3 text-start">
      <Card style={{ width: "18rem" }}>
        <Card.Img variant="top" src={book.img} />
        <Card.Body>
          <Card.Title>{book.name}</Card.Title>
          <Card.Text>{book.description}</Card.Text>
          <p>
            <b>Price</b> : {book.price}
          </p>
          <p>
            <b>Quantity</b> : {book.quantity}
          </p>
          <p>
            <b>Supplier</b> : {book.supplier}
          </p>
          <Button onClick={()=>handleNavigate(book._id)} variant="primary">Update Item</Button>
        </Card.Body>
      </Card>
    </div>
  );
};

export default BookCard;
user_92015870
Related