If no data is coming, the div should not appear-CodePudding

Sometimes the data may not come from the backend. I don't want to show div when data is not coming. how can I do it?

<div className="policydetailinformation__item">
 <h3>{t('policy.policy-details.address')}</h3>
 <p>{props.location.state.policy.information}</p>
</div>

I tried to put "ngIf" and got an error like this: Expected corresponding JSX closing tag for 'div'.

CodePudding user response：

Set the condition and && then your div

{showDiv && <div>
....
</div>
}

CodePudding user response：

{
  const addr =  t('policy.policy-details.address');
  const isData = !!addr
  return addr ? (
    <div className="policydetailinformation__item">
     <h3>{addr}</h3>
     <p>{props.location.state.policy.information}</p>
    </div>
  ) : null
}

CodePudding user response：

Just make a conditional class

<div className={youdata===null?"hidden":"policydetailinformation__item"}>
 <h3>{t('policy.policy-details.address')}</h3>
 <p>{props.location.state.policy.information}</p>
</div>

give a hidden class a display none property