/Javascript/React/Hide component blur react hooks

Hide component blur react hooks

const React,{ useState, useMemo } = React

const usToggleOnFocus = (initialState = false) => {
  const [show, toggle] = useState(initialState);
  
  const eventHandlers = useMemo(() => ({
    onFocus: () => toggle(true),
    onBlur: () => toggle(false),
  }), []);

  return [show, eventHandlers];
}

const Demo = () => {
  const [show, eventHandlers] = usToggleOnFocus();

  return (
    <div>
      <input {...eventHandlers} />
      {show && <div>Content</div>}
    </div>
  );
};

ReactDOM.render(
  <Demo />,
  demo
);

Source: stackoverflow.com

Similar codes

-1 vote338 views1 answer
React localstorage remove item
Javascript React
-1 vote362 views1 answer
What is the use of consrtructors in reactjs
Javascript React
1 vote412 views1 answer
React native get mac address
Javascript React
59 votes320 views3 answers
Npm react router dom
Javascript React
68 votes374 views3 answers
React add inline styles in react
Javascript React
0 vote368 views1 answer
Await zoomus.joinmeeting crashing app react native
Javascript React
0 vote341 views1 answer
Unexpected token react
Javascript React
0 vote349 views1 answer
React native scrollbar position issue
Javascript React
18 votes373 views4 answers
React for loop in render
Javascript React
0 vote352 views1 answer
How to go specific content in react single page by id
Javascript React