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 ponent 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=";
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => 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>
<>

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 ponent 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/2000/svg"
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => 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>
<>

• javascript
• reactjs

2 Answers 2

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

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