complication conditioning in jsx passing prop to component

Question

How can I add a class to the content's <div> if the expiry_date is null or undefined? This is challenging because I have to filter and then do map, I'm lost.

{openApplyModal && <ConfirmModal 
          visible={openApplyModal}
          title={'Take this task'}
          handleCancel={this.handleCancelApply}
          handleOk={this.handleApplyAd}
          loading={loading}
          error={error}
          content={
            <div>
              {error ? error :
              <div>
                <p>{ads.filter(obj => obj._id === this.state.selectedAd_Id).map(obj => obj.expiry_date ? `You have to complete this task in ${fromNow(moment(obj.expiry_date))}` : '' )}</p>
              </div>}
            </div>
          }
        />}

There's nothing wrong with above code, it worked, but output '' if the expiry_date is not present will leave a empty modal that's why I'm thinking of to add a hide class to the div.

Answer 1

Add an additional filter for getting rid of any items that have a null expiry_date to your ads array before mapping it out in JSX:

content={
 <div>
 {error ? error :
  <div>
   <p>{ads
        .filter(obj => obj._id === this.state.selectedAd_Id)
        .filter(obj => !!obj.expiry_date)
        .map(obj => `You have to complete this task in ${fromNow(moment(obj.expiry_date))}`)}
  </p>
   </div>}
 </div>
}

Does this solve your problem? If not, please let me know what exactly did you have in mind.