'javascript elseif case in JSX

Hi when I have a condition output in frontend is there a possibility to make a else if () statement as well?

current code looks like:

    {this.props.contentComponentData.typeOf === 1
      &&
      <ContentComponentChecklistInstances
            checklistItems={this.props.contentComponentData.checklists}
      />
     }

Thanks in advance

javascript reactjs

Solution 1:^[1]

    {this.props.contentComponentData.typeOf === 1
      &&
      <ContentComponentChecklistInstances
        checklistItems={this.props.contentComponentData.checklists}
      />
     || condition && ifConditionMetExpression
     }

But this is a bit hard to read, I suggest you use ternaries instead:

    {this.props.contentComponentData.typeOf === 1
      ? <ContentComponentChecklistInstances
        checklistItems={this.props.contentComponentData.checklists}
        />
      : condition
        ? ifConditionMetExpression
        : null
     }

Solution 2:^[2]

 (first condition)
 ? // if first condition true this part run
 : (second condition)
    ? // if second condition true this part run
    : // else part

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Lennholm
Solution 2	Javiere

'javascript elseif case in JSX

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]