How to have two function calls inside ternary operator in JSX?

Question

I am trying to render two components if the condition is met inside a ternary operator. However, only the 2nd component is rendered. How can I probably put two functions calls after the conditions?

    {
      views === "monthly"
      ? this.renderDays(),
        this.renderCells()
      : null
    }

I tried the followings (none of them works)

    {
      views === "monthly"
      ? this.renderDays(),
        this.renderCells()
      : null
    }

    {
      views === "monthly"
      ? (this.renderDays(), this.renderCells())
      : null
    }

    {
      views === "monthly"
      ? (this.renderDays(); this.renderCells())
      : null
    }

Answer 1

You could return an array of components:

{
  views === "monthly"
  ? [this.renderDays(), this.renderCells()]
  : null
}

Or if the methods return arrays itself, just spread them:

 {
  views === "monthly"
  ? [...this.renderDays(), ...this.renderCells()]
  : null
}