How to add condition in React.js

Question

I want to show tooltip if two conditions are true.

  <LikelihoodIndicatorRefi likelihood={ props.props.approvalChance_NewLoan } >
        {console.log(props.props.approvalChance_NewLoan === 'Less Likely' && props.props.approvalChance_Combined === 'Less Likely')}
        {(props.props.approvalChance_NewLoan === 'Less Likely' && props.props.approvalChance_Combined === 'Less Likely' &&
          <SmartTooltip wrapperCssClass="option-detail-tooltip" ctaLabel="How do I increase my chances?">
            <h3>Less Likely</h3>
            <p>
              Want to improve your chnace of getting this loan? &nbsp;Try increasing the time to pay it back over.Or you could try asking for less money.
            </p>
          </SmartTooltip>)}
        </LikelihoodIndicatorRefi>

  <LikelihoodIndicatorRefi likelihood={ props.props.approvalChance_NewLoan } >
        {console.log(props.props.approvalChance_NewLoan === 'Less Likely' && props.props.approvalChance_Combined === 'Less Likely')}
        {(props.props.approvalChance_NewLoan === 'Less Likely' && props.props.approvalChance_Combined === 'Less Likely' &&
          <SmartTooltip wrapperCssClass="option-detail-tooltip" ctaLabel="How do I increase my chances?">
            <h3>Less Likely</h3>
            <p>
              Want to improve your chnace of getting this loan? &nbsp;Try increasing the time to pay it back over.Or you could try asking for less money.
            </p>
          </SmartTooltip>)}
        </LikelihoodIndicatorRefi>

Does this answer your question? [if-else statement inside jsx: ReactJS](https://stackoverflow.com/questions/44046037/if-else-statement-inside-jsx-reactjs) — Emile Bergeron, Oct 31 '19 at 15:54

score 0 · Answer 1 · answered Oct 31 '19 at 16:19

Try

  {(props.props.approvalChance_NewLoan === 'Less Likely' && 
   props.props.approvalChance_Combined === 'Less Likely' ?
      <SmartTooltip wrapperCssClass="option-detail-tooltip" ctaLabel="How do I increase my chances?">
        <h3>Less Likely</h3>
        <p>
          Want to improve your chnace of getting this loan? &nbsp;Try increasing the time to pay it back over.Or you could try asking for less money.
        </p>
      </SmartTooltip>) : null}

score 0 · Answer 2 · answered Oct 31 '19 at 17:18

Simply chain && expressions, it will always evaluate to the last expression, if all expressions before were true. So bool && bool && <Component /> will be enough to display it. If you have it as first element in your JSX Tree then you should add <></> React.Fragment around the condition to have a valid root element.

How to add condition in React.js

2 Answers2