How to write ternary operator with out else using ReactJs?-CodePudding

currently in my code if data is there i was displaying the details like (year, title, registration and location), if no data then I am displaying no data available message under Prime section, Now i want to hide the entire section with details if no data available.

 const WpPrime = ({
      translate, memberships, otherDetails, selectedTemplate,
    }) => (
      <section className="prime-section">
        <p className="section-title">
          {(otherDetails.section_title
            && otherDetails.section_title.prime)
        || translate('Premier')}
        </p>
        {Array.isArray(memberships) && memberships.length > 0 ? (
          memberships
            .sort((a, b) => b.year - a.year)
            .map(item => (
              <div key={item.year || item.title} className={`two-column-section date-alignment-${otherDetails && otherDetails.date_alignment}`}>
                <p className="section-sub-title" style={{ color: getColor(selectedTemplate) }}>
                  {item.year}
                </p>
                <div className="section-description">
                  <p className="section-title-description" style={{ color: getColor(selectedTemplate), fontWeight: '700' }}>
                    {item.title}
                  </p>
                  <p>
                    {item.registration ? ` ${item.registration}` : ''},
                    &nbsp;{item.location}
                  </p>
                </div>
              </div>
            ))
        ) : (
          <p className="section-description">{translate('dataNotAvailable')}</p>
        )}
      </section>
    );

CodePudding user response：

You can use the && operator for this purpose. If the condition is true then it will display the data.

const WpPrime = ({
  translate,
  memberships,
  otherDetails,
  selectedTemplate,
}) => (
  <section className="prime-section">
    <p className="section-title">
      {(otherDetails.section_title && otherDetails.section_title.prime) ||
        translate("Premier")}
    </p>
    {Array.isArray(memberships) &&
      memberships.length > 0 &&
      memberships
        .sort((a, b) => b.year - a.year)
        .map((item) => (
          <div
            key={item.year || item.title}
            className={`two-column-section date-alignment-${
              otherDetails && otherDetails.date_alignment
            }`}
          >
            <p
              className="section-sub-title"
              style={{ color: getColor(selectedTemplate) }}
            >
              {item.year}
            </p>
            <div className="section-description">
              <p
                className="section-title-description"
                style={{ color: getColor(selectedTemplate), fontWeight: "700" }}
              >
                {item.title}
              </p>
              <p>
                {item.registration ? ` ${item.registration}` : ""}, &nbsp;
                {item.location}
              </p>
            </div>
          </div>
        ))}
  </section>
);

CodePudding user response：

Make the ternary operator for the whole section then:

<>
{Array.isArray(memberships) && memberships.length > 0 ? <section>...</section>:null}
</>

CodePudding user response：

You can use null or <></> (React Fragment tag) in the else part.

{ your_condition ? render_what_you_want : null}

{ your_condition ? render_what_you_want : <></>}