Ternary operator, looking to use multiple ternary operator in JavaScript

Question

In this section of the code which is part of the full code that I posted at the bottom,

      {this.props.program.application_required ||
      this.state.isEnableWaitlist ||
      this.isFree() ? (
        <button
          type="button"
          onClick={_ => this.manualPayment()}
          style={{
            padding: "10px",
            display: "block",
            marginLeft: "auto",
            marginBottom: 0
          }}
        >
          {this.props.program.application_required ||
          this.state.isEnableWaitlist
            ? "Submit Application"
            : "Confirm Order"}
        </button>
      )

I want to separate this.state.isEnableWaitlist from the other two this.props.program.application_required & this.isFree() inside the same if statement so that if this.state.isEnableWaitlist it will have it's own onClick function before it hits the second part of the false statement which starts with

: (<>
                  <p
                    style={{
                      padding: "20px",
                      fontFamily: "Open Sans, sans-serif"
                    }}.

What is the best way to do it in a ternary operator?

This is the full code below

          {this.props.program.application_required ||
          this.state.isEnableWaitlist||
          this.props.program.manual_invoices ||
          this.isFree() ? (
            <>
              {this.props.program.application_required ||
              this.state.isEnableWaitlist ||
              this.isFree() ? (
                <button
                  type="button"
                  onClick={_ => this.manualPayment()}
                  style={{
                    padding: "10px",
                    display: "block",
                    marginLeft: "auto",
                    marginBottom: 0
                  }}
                >
                  {this.props.program.application_required ||
                  this.state.isEnableWaitlist
                    ? "Submit Application"
                    : "Confirm Order"}
                </button>
              ) : (
                <>
                  <p
                    style={{
                      padding: "20px",
                      fontFamily: "Open Sans, sans-serif"
                    }}
                  >
                    <b>{this.props.organization}</b> opted to collect
                    payments manually. After confirming your order{" "}
                    <b>{this.props.organization}</b> will contact you to
                    discuss next steps & payment options.
                  </p>
                  <button
                    type="button"
                    onClick={_ => this.manualPayment()}
                    style={{
                      padding: "10px",
                      display: "block",
                      marginLeft: "auto",
                      marginBottom: 0
                    }}
                  >
                    Confirm Order
                  </button>
                </>
              )}
            </>
          ) 

Answer 1

Falsy values

[0, "", '', false, null, undefined]

Ternary

condition ? yes : no;

condition
? 1
: condition2
  ? 1
  : 0

Logical AND

12 && "hello" && null && undefined // return first falsy value

Logical OR

12 || "hello" || null || undefined // return first truthy value

Nullish coalescing

0 ?? "hello" // 0
false ?? "hello" // false

Logical nullish assignment

// Normal
let x = null;
 
if (x === null || x === undefined) {
  x = 12;
}

// Advanced
let x = null;
 
x ??= 12;

Logical OR assignment

// Normal
let x = false;
 
if (!x) {
  x = 12;
}

// Advanced
let x = false;
 
x ||= 12;

Logical AND assignment

// Normal
let x = "Truthy value";
 
if (x) {
  x = 12;
}

// Advanced
let x = "Truthy value";
 
x &&= 12;