how do i toggle the div when click outside of the button in react js?

Question

here in my code i m toggling a panel on the basis of click event when clicked it will show and when again clicked on the same button it will disappear. but what i want when i will click outside the button anywhere the panel should close, how do i do that?

function Project(props) {
    const [rightPanel, setrightPanel] = useState(false);

    function projectToggle () {
        if(!rightPanel) setrightPanel(true);
        else setrightPanel(false);
        }
    return (
        <React.Fragment>
            <div className="vh-ce-align pd-b-10 mg-b-5 bo-bottom-grey">
                <div className="button-blue" onClick={projectToggle}>Create New Project</div>
            </div>
            <div className="d-flex">
                
                {rightPanel ? (<div className="right-side-panel">
                    <div className="mg-b-20">
                        <div className="fw-bold mg-b-10">Client Id</div>
                        <input type="text" className="right-side-input"/>
                    </div>
                    <div className="mg-b-20">
                        <div className="fw-bold mg-b-10">Frequency</div>
                        <div className="wd-pct-100 d-flex pd-b-5 bo-bottom-grey">
                            <div className="flex-one">Annually</div>
                            <i className="fas fa-chevron-down mg-r-10"></i>
                        </div>
                    </div>
                    <div className="mg-b-20">
                        <div className="fw-bold mg-b-10">Year</div>
                        <div className="wd-pct-100 d-flex pd-b-5 bo-bottom-grey">
                            <div className="flex-one">Select Year</div>
                            <i className="fas fa-chevron-down mg-r-10"></i>
                        </div>
                    </div>
                </div>): null}
            </div>
        </React.Fragment>
    )
}

Does this answer your question? [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — zzzzBov, Jan 06 '22 at 15:12
react _is_ javascript. It's the same fundamental solution, unless what you're looking for is someone to write the code for you (in which case StackOverflow is not the place to ask for that kind of help, and you should hire a consultant). — zzzzBov, Jan 06 '22 at 15:17
oh please sir, it is javascript but it not that traditional js a lot of things are there, i almost did the whole thing its just a click event outside the button is i dont know how to do if you dont want to help thats fine. we turn out to this platform when we are new and learning. A little bit of help will be appreciated — Abhishek Roy, Jan 06 '22 at 15:19

score 1 · Answer 1 · answered Jan 06 '22 at 15:29

1

Try this code below.

const handleClickClosePanelFromOutside = (e) => {
    if (e.target.className !== "button-blue") {
        setRightPanel(false);
    }
}

useEffect(() => {
    document.body.addEventListener("click", handleClickClosePanelFromOutside)
    return () => {
        document.body.removeEventListener("click", handleClickClosePanelFromOutside)
    }
})

answered Jan 06 '22 at 15:29

Dae Hyeon Mun

521
4
7

not working sir – Abhishek Roy Jan 06 '22 at 15:40
Did you put the codes above in Project? It should be in Project function and when Project component mount, EventListener runs handleClickCloseFromOutside whenever you click in the body area. – Dae Hyeon Mun Jan 06 '22 at 15:43
yes i did but it is not firing up the click event in the dom outside the button – Abhishek Roy Jan 06 '22 at 15:45
or there is other way, you should wrap the Project component with like Background component which has [isOpenPanel, setIsOpenPanel] = useState(false). and when it is clicked, you can change the state which means you can control display the panel with it. – Dae Hyeon Mun Jan 06 '22 at 15:47
Not happening. Can you please tell me other way around – Abhishek Roy Jan 06 '22 at 17:53
Fix the baxkgroind width and heighr bigger than Project component. If Background size is not bigger, you can't click it. Just make a lot bigger than Project component. It will work. I use this way to close modal pop up at work. If you find it works, you should give background-color: transparent to Background color. – Dae Hyeon Mun Jan 06 '22 at 23:05

score 0 · Answer 2 · answered Jan 06 '22 at 15:18

0

What you're looking for is an event type to attach an event handler function to ... And, in this case, the not so obvious answer is a blur (opposite of focus) event. When anything in the DOM observes a user interaction after the button is clicked, the button will receive an onblur event.

answered Jan 06 '22 at 15:18

Joe Johnson

1,814
16
20

but how do i use that here in react js using useEffect ? – Abhishek Roy Jan 06 '22 at 15:21
I would refer to the documentation for the useEfffect method in React (Google it!). What you may not have been privy to and would be harder to ascertain would be the type of event and/or behavior which would trigger the code you would like executed. Now that you've got that (see my response above), please feel free to look at its implementation in the documentation for any event handler (for example, you would replace the "click" event in the following answer with the "blur" event, potentially). As I've never used the useEffect function (nor have I read the response below), it's up to you. – Joe Johnson Feb 10 '22 at 13:36

how do i toggle the div when click outside of the button in react js?

2 Answers2