how to make toggle if user click element window toggle take value false ? in React

Question

i make toogle in react using useState like this sample component

import React, { useState, useEffect } from "react";
const Button = () => {
  const [show, setShow] = useState(false)
  
  useEffect(() => {
    function listing () {
      setShow(false)
  }
    if (show && true) {
      window.addEventListener("click", listing, true)
      console.log("test")
    }
  })
  return (
    <>
      <button onClick={() =>
        setShow(true)
      }>
      test
      </button>
      {show && <div> show text</div>}
    </>
  )
}
export default Button

but if button already true value and im click again button value is true and im click window element be false, so element target div show cant gone, but is same if im give setShow(!show) on listener onclick button. target element keep show if already true

`else { window.removeEventListener("click", listing) }` – Sysix Mar 28 '23 at 22:50 — Sysix, Mar 28 '23 at 22:50

Eisa Rezaei · Answer 1 · 2023-03-28T22:30:14.847

0

I think this is something that you want to create:

import React, { useState } from "react";
export const Button = () => {
  const [show, setShow] = useState(false);
  return (
      <button onClick={() => setShow(!show)}>
       {show ? "active" : "inactive" }
      </button>

  );
};

edited Mar 28 '23 at 22:30

answered Mar 28 '23 at 22:22

Eisa Rezaei

528
1
12

but if button active and user click other window or screen button become inactive – Nandawaan Libya Mar 28 '23 at 22:29
like dropdown in navigation or sometimes user choice language so user can have thow choice inactive button , click screen or click button – Nandawaan Libya Mar 28 '23 at 22:31
you can see this article about a hook called useOutSideClick https://usehooks.com/useOnClickOutside/ – Eisa Rezaei Mar 28 '23 at 22:32
thank you for reference article , im already find anwer – Nandawaan Libya Mar 29 '23 at 04:45

score 0 · Answer 2 · answered Mar 29 '23 at 04:43

im find answer https://stackoverflow.com/a/45323523/16945930

and i add liltle code

import React,{ useState, useEffect, useRef } from 'react';

 function useComponentVisible(initialIsVisible) {
    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
    const ref = useRef(null);

    const handleClickOutside = (event) => {
        if (ref.current && !ref.current.contains(event.target)) {
            setIsComponentVisible(false);
        }
    };

    useEffect(() => {
        document.addEventListener('click', handleClickOutside, true);
        return () => {
            document.removeEventListener('click', handleClickOutside, true);
        };
    }, []);

    return { ref, isComponentVisible, setIsComponentVisible };
}

const DropDown = () => {
  const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
  return (
    <>
  
     <div ref={ref}>
      <a onClick={()=> {setIsComponentVisible(!isComponentVisible)}}>show</a>
        {isComponentVisible && (<p>Dropdown Component</p>)}
     </div>
     </>
  );

}
export default DropDown

how to make toggle if user click element window toggle take value false ? in React

2 Answers2