CODEWITHSUNDEEP
javascriptreactjs
brooksrelyt
brooksrelyt

Reputation: 4025

hide element if another is null

The schedule.description either has content or is null.

I am trying to hide the h4 like I did for the section_schedule_items map div. But, I am having no luck after trying almost all conditional statements.

Is there a way to hide the h4 title if the description is null? Even if the element is outside of the section_schedule_items map function?

Snippet:

{adv_event.schedule.map((schedule, index) => (
  <div className="col-md-12 med-spaces" key={index}>
    <div className="schedule">
      <h4>Event Schedule</h4>
      <div key={index}>
        {schedule.section_schedule_items.map((schedule) => (
          <div className={schedule.description !== null ? ( 'block' ) : ( 'hide' )}>
            <div className="schedule-item">
              <p className="item-title">{schedule.title}</p>
              <Markdown
                className="item-body"
                source={he.decode(`${schedule.description}`)}
                escapeHtml={false}
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
))}

What shows when there is content in the description: enter image description here

When description is null (title still shows): enter image description here

Looking to remove the title basically.

Upvotes: 0

Views: 124

Answers (1)

Julian Kleine
Julian Kleine

Reputation: 1547

A possible way to identify if at least one of the descriptions is false with a condition like

schedule.section_schedule_items.some(
  ({ description }) => !description,
) && ... // returns true -> so some are false

A possible way to identify if all of the descriptions are false with a condition like

schedule.section_schedule_items.every(
  ({ description }) => !description,
) && ... // returns true -> so all are false

Upvotes: 4

Related Questions