How can I hide a div with if else render react? - css

Question

I am trying to hide an Event div when there is no event date showing
Here is how my project look like:
and here is how it appear when there is no event on that day:
Here is my following component code:
<div className="event-list-item-content">
<div className="header">
<span className="announcements">Events</span>
<button className="plus">
<ControlPoint />
</button>
</div>
{teamData.Events.map((event, index) => (
<div key={index} className="list-events-description">
{moment(event.date).format("YYYY-MM-DD") ===
moment(date).format("YYYY-MM-DD") && (
<div className="content">
{event.description}
<span>
{moment(event.timestart, "HH:mm:ss").format("h:mm A")}
<svg
width="8"
height="12"
viewBox="0 0 8 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.589844 1.41L5.16984 6L0.589843 10.59L1.99984 12L7.99984 6L1.99984 6.16331e-08L0.589844 1.41Z"
fill="#00A682"
/>
</svg>
</span>
<hr />
</div>
)}
</div>
))}
</div>
How can I hide this element ?

Answer 1

You need to check whether teamData.Events is empty. If it is not, then display. Otherwise, it will not be shown.
<div className='event-list-item-content'>
{teamData.Events.length !== 0 && (
<div className='header'>
<span className='announcements'>Events</span>
<button className='plus'>
<ControlPoint />
</button>
</div>
)}
{teamData.Events.map((event, index) => (
<div key={index} className='list-events-description'>
{moment(event.date).format('YYYY-MM-DD') === moment(date).format('YYYY-MM-DD') && (
<div className='content'>
{event.description}
<span>
{moment(event.timestart, 'HH:mm:ss').format('h:mm A')}
<svg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M0.589844 1.41L5.16984 6L0.589843 10.59L1.99984 12L7.99984 6L1.99984 6.16331e-08L0.589844 1.41Z' fill='#00A682' />
</svg>
</span>
<hr />
</div>
)}
</div>
))}
</div>