can i ask using useEffect inside onFocus Event?-CodePudding

 const [showSearch, setShowSearch] = useState(false);
 const [inputHover, setInputHover] = useState(false);

...

 <div className={`search ${showSearch ? "show-search" : ""} `}>
            <button
              onFocus={
                setShowSearch(true)
              }
              onBlur={() => {
                if (!inputHover) {
                  return setShowSearch(false);
                }
              }}
            >

First I'm using just useState but

[Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.]

this error occurred so I wrapped it inside useEffect then [Warning: Expected onFocus listener to be a function, instead got a value of object type.] I find this error children component receives props but just direct push event function

so.. finally upside code is complete... but this code does not work. help me, please

CodePudding user response：

onFocus={ ()=> setShowSearch(true) }

i fixed right now.

but i didn't know why this code work no error.

who tell me why that code dosen't work and this code work?

CodePudding user response：

The error Expected onFocus listener to be a function, instead got a value of object type occurred because you tried to pass an object as an event handler instead of a function. You should pass a function as the event handler to avoid this error. So onFocus={ ()=> setShowSearch(true) } is the right way to do it