Invalid hook call. Hooks can only be called inside of the body of a function component. at ClaimReward (http://localhost:3000/static/js/bundle.js:)

[decentralized-86]

ERROR
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (http://localhost:3000/static/js/bundle.js:24063:13)
    at useState (http://localhost:3000/static/js/bundle.js:40169:25)
    at ClaimReward (http://localhost:3000/static/js/bundle.js:586:86)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:13722:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:13766:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:13823:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:13837:29)
    at executeDispatch (http://localhost:3000/static/js/bundle.js:17981:7)
    at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:18007:11)
    at processDispatchQueue (http://localhost:3000/static/js/bundle.js:18018:9)

The Video Component

import React from "react";
import "./VideoCard.css";
import ClaimReward from "./claimReward";
import { useNavigate } from "react-router-dom";

export default function VideoCard({ videoSrc, verificationStatus }) {
    const navigate = useNavigate();
    const handleReuploadClick = () => {
        // Perform any necessary logic before navigating
    
        // Navigate to the Preview Campaign page
        navigate("/PreviewCampaign");
      };
  const renderContent = () => {
    if (verificationStatus === "analyzing") {
      return (
        <>
          <p>Analyzing Your Video...</p>
          <div className="loading-spinner"></div>
        </>
      );
    } else if (verificationStatus === "success") {
      return (
        <>
          <p>Verification Successful</p>
          <p>Output on Analyzing the Selected Activity: 80%</p>
          <button className="claim-reward-button" onClick={ClaimReward}>Claim Reward</button>
          <button className="reupload-button" onClick={handleReuploadClick}>Reupload your Video</button>
        </>
      );
    } else {
      return (
        <>
          <p>Task Not Detected</p>
          <button className="reupload-button" onClick={handleReuploadClick}>Reupload Your Video</button>
        </>
      );
    }
  };

  return (
    <div className="phone-screen">
      <div className="video-card">
        {videoSrc && <video src={videoSrc} controls />}
        <div className="video-card__overlay">
          {renderContent()}
        </div>
      </div>
    </div>
  );
}

The claimReward component

import React, { useState } from "react";
import "./claimReward.css";

export default function ClaimReward() {
  const [codeCopied, setCodeCopied] = useState(false);

  const handleCopyCode = () => {
    const code = "ABC123";
    navigator.clipboard.writeText(code);
    setCodeCopied(true);
  };

  return (
    <div className="claim-reward-container">
      <div className="gift-card">
        <h3>Congratulations!</h3>
        <p>Unlock a $100 Amazon Gift Card</p>
        <div className="code-container">
          <p className="gift-card-code">Code: ABC123</p>
          <button className="copy-button" onClick={handleCopyCode}>
            <span role="img" aria-label="Copy" className="copy-symbol">
              &#128203;
            </span>
          </button>
        </div>
        {codeCopied && <p className="copy-status">Code copied!</p>}
      </div>
    </div>
  );
}

IM getting this error message when ever i click on the claim Reward button of the VideoCard component to trigger the claimReward component but its showing me this error im not getting the error as i am using the function not the class still it persist me this error

[Nlferu]

Hello @decentralized-86

You have to move your const navigate = useNavigate(); under some handle function and it should solve your problem.