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

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 ?

https://stackoverflow.com/questions/67327301/how-can-i-hide-a-div-with-if-else-render-react April 30, 2021 at 10:07AM