reactJS hiding a <div> in the render leaves a lot of whitespace - reactjs

Question

I have a reactJS application which renders from a map function. This is what some of the output looks like:
I am generating data for 3 beneficiaries and I am giving the user the option of deleting each beneficiary. The data is pulled from a database. Once the user has deleted whichever beneficiaries he/she wants to delete, the data will be written back to the database.
When a user clicks on the Delete this Beneficiary buttion, an onclick function is called. That function will set a flag (beneDeleteFlag) associated with that particular beneficiary. That data is written to the state with a setstate() so reactJS will re-render. When the render occurs, I set the classname of each section to either hide_div or show_div (which are classes in my .css file which set visibility to hidden or visible. This is the code that executes to render each beneficiary:
return idArray.map( item => (
<div>
<div className={item.visibility}>
<div className="beneficiary_background">
<div className="row">
<div className="col-3 text-left text_14">
<label>Name:</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisName} value={item.beneName} maxLength="33"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label>SSN:</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisMid} value={item.beneMid} maxLength="9"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label>Address 1:</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisAddr1} value={item.beneAddr1} maxLength="20"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label>Address 2:</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisAddr2} value={item.beneAddr2} maxLength="20"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label>Address 3:</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisAddr3} value={item.beneAddr3} maxLength="20"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label>City</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisCity} value={item.beneCity} maxLength="20"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label>State</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisState} value={item.beneState} maxLength="2"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label>Zip Code</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisZip} value={item.beneZip} maxLength="5"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label id="lblName">Spouse</label>
</div>
{this.renderSpouse(item.thisSpouse, item.beneSpouse)}
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label id="lblName">Primary</label>
</div>
{this.renderPrimary(item.thisPorS, item.benePorS)}
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label id="lblName">Percent</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisPct} value={item.benePct} maxLength="3"/>
</div>
</div>
<div className="spacer">
</div>
<div className="row">
{this.renderDeleteButton(item.thisDelete)}
</div>
<div className="spacer">
</div>
</div>
</div>
<div className="spacer">
</div>
</div>
))
At the top of the render, there is a line of code that reads
<div className={item.visibility}>
{item.visibility} will contain hide_div for any beneficiary that the user elects to delete.
My issue is that when the delete the beneficiary button is clicked (I clicked on the button for the second beneficiary), and the {item.visibility} gets populated with hide_div, this is what gets rendered:
As you can see, the render occurs, but it just hides the . I though with bootstrap, the next would float up and not leave any whitespace between the two 's that are visible.
Any suggestions?

Answer 1

Try using reduce over map so you can selectively render your items instead of hiding the ones you don't want to see.
Something along the lines of:
return idArray.reduce( (all, item, idx) => {
if (item.visibility !== 'hide_div') {
all.push(
<div key={idx}>
<div className="beneficiary_background">
...
</div>
</div>
)
}
return all
}, [])
You won't need to set className for hidden items anymore

Answer 2

if you're using visibility: hidden, it will indeed leave the space there. Visibility Hidden leaves the space that should be occupied by the content hidden if it was visible. If you want no space left at all, use display: none instead. It will act the same way but without space left for the element.

Answer 3

you can filter the data which have been marked as deleted using filter function in javascript:
const array = [{beneDeleteFlag: true, data: 'data 1'}, {beneDeleteFlag: false, data: 'data 2'}, {beneDeleteFlag: false, data: 'data 3'}, {beneDeleteFlag: true, data: 'data 4'}]
const newArray = array.filter((item) => item.beneDeleteFlag !== true)
console.log(newArray)
and the reason why you still got the empty space in your UI, it's because you're using visibility: 'hidden' in your CSS, you should use display: 'none' instead.