I'm trying to use react hooks to create a hover to appear a div and i'm having this issues:

Line 69:31: React Hook "useState" is called in function "renderHideOptionalClauseTrigger" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

Here is my code base:

import React, { useState, useEffect } from "react";

const renderHideOptionalClauseTrigger = () => {
  const [inHover, setHover] = useState(false);

  return (
    <div className="my-option-clause">
      <text>My Optional Loan Clause</text>
      <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        onMouseEnter={() => setHover(true)}
        onm ouseLeave={() => setHover(false)}
      >
        <path fill-rule="evenodd" clip-rule="evenodd" d="..."/>
      </svg>
    </div>
  );
};


function LoanTerms(props) {
  const router = useRouter();
  const {
    currentLoan,
    getUserLoanRequest,
    updateUserLoanProposalRequest,
    user,
  } = props;

return (

<>
...
                  <Collapsible
                    trigger={renderOptionalClauseTrigger()}
                    classParentString="opt-data"
                    overflowWhenOpen="visible"
                    triggerWhenOpen={renderHideOptionalClauseTrigger()}
                  >

                    <div className="FlowCard__info-text">
                      Will be added verbatim as last clause to the loan
                      agreement. See{" "}
                      <Link className="orange-link" to="/product">
                        Product page
                      </Link>{" "}
                      for other clauses. (1000 characters)
                    </div>
<>

CodePudding user response：

React expects React components to be named with a capital first letter. Try RenderHideOptionalClauseTrigger instead of renderHideOptionalClauseTrigger

CodePudding user response：

In order to render your component and use it anywhere, you have to export the component at the end of the file. In your case, if you want to use LoanTerms, you should write export default LoanTerms.