how to find out a div is inside window in react js

when I click on Id one div is coming. But I want to check if the div is exceeding the window then the div must hide. enter image description here Here is the sample code I have tried.

const User= () =>{
   
    const openRequestDetails=(event,reqId)=>{
    var clkPosTop= Math.floor(event.target.getBoundingClientRect().top());
    var popup= document.getElementById('rId');
    var popupHt= popup.offsetHeight;
    if(clkPosTop > popupHt){
        popup.style.top=clkPosTop+"px";
document.getElementById('rId').style.display="block";
        }
     }
       return (
        <>
            <Header />
            <table>
                <tr>
                    <td>Id</td>
                    <td>First name</td>
                    <td>Last Name</td>
                </tr>
            {
                user.map((key, i)=>(
                    <tr>
                        <td onClick={(e) => openRequestDetails(e,i)}>{i}</td>
                        <td>{key.first_name}</td>
                        <td>{key.last_name}</td>
                        <td>{key.email}</td>
                        <td>{key.gender}</td>
                    </tr>
                ))
            }
            </table>
            <div id="rId" />
        </>
    )
}

export default User;

I am displaying the div is exact same row where I click. But when I click on the last IDs the div is exceeding the size of the window. So I want to check if the div is exceeding the windows then the display should hide. I just want to check when I click on id's if the div is exceeding the windows then I should not display that div otherwise it should display.

[![enter image description here][1]][1]
Here is the sample CSS file.
div#rId{
    background-color: cyan;
    height: 34px;
    width: 35%;
position:fixed;
  left:28px;
}
table{
    border-collapse: collapse;
}
td{
    border: 1px solid red;
}
  1. Can anyone know how to solve this problem.

     We can write simple javascript code inside the function. can anyone help me to solve this problem?
    

Answer

Let’s look at how it’s decided whether to show the pop up or not:

Here’s the code where the test is made:

    const openRequestDetails=(event,reqId)=>{
    var clkPosTop= Math.floor(event.target.getBoundingClientRect().top());
    var popup= document.getElementById('rId');
    var popupHt= popup.offsetHeight;
    if(clkPosTop > popupHt){ //This is almost always true as popupHt is small
        popup.style.top=clkPosTop+"px";
document.getElementById('rId').style.display="block";
        }

What you need to do is test whether the popup when placed with its top the same as the td’s top will have its bottom below the bottom of the viewport.

The bottom of the popup will be at: clkPosTop + popupHt

The bottom of the viewport is at window.innerHeight

So the test should be

if ( (clkPosTop + popupHt) < window.innerHTML)