Hide or show div element

Question

I would like to find out how you can hide and show div element in react typescript. This is the code that I have so far. Any feedbacks

function GetUserInfo (user:User)
{
   let userInfo = USERINFO.find((d) => d.Address === user.Address);

   if(userInfo)
   {
      //Show Div
      showDiv
   }
   return userInfo.data

}

function showDiv(props) {
   return <div id="missingPO">Unable at identify user info.</div>
}

Answer 1

The code you have written is a bit unclear about how you wanna hide it,

But for example, you want to hide an element in case a variable is true, in your case can be something with an address or what you are trying to do.

for example, I want to hide a value when const isHidden=true

I will discuss two ways.

1. You can declare a class that hides the div, for example in your global class add a CSS class

.hidden{
display: none;
}

then in your div, you can check if isHidden enables class.

<div className={isHidden && 'hidden'} />

2. you can check like this

//in your method return div in case you are not hidden, pass the isHidden as props.
function showDiv(props) {
   return props.isHidden ?<></>: <div id="missingPO">Unable at identify user info</div>
}

// or just check with && 
!isHidden && <div> will show only if is hidden false</div>

// the pros of using the second one are because you are unmounting div, but this can be a downside too, depends what you need
// with display it will remove from the page, but now from the dom, also you can make visibility: hidden if you do not want to remove it from the page just to hide.

If you have any question please ask ?