Conditionals in React

Question

How do I use conditionals in React?

Essentially, for customerClassesRemaining, I currently say "class(es)" but I want to write code that says if there's one class, use "class," and if there's more than one class, use "classes." Thanks!

render() {
    const loadBoxes = (
      Array.from({ length: 20 }).map((n, i) => (
        <LoadBox key={`${i}${n - 1}key`} />
      ))
    );
    const customerBoxes = !this.props.customersLessThanFive ? loadBoxes
    : this.props.customersLessThanFive.map((customer, i) => (

      if (customer.classes_remaining == 1) {
        customerClassesRemaining2 = {`${customer.classes_remaining} class left`}
      }
      else {
        customerClassesRemaining2 = {`${customer.classes_remaining} classes left`}
      }


      <CustomerFewerFiveBox
        key={customer.id}
        customerIndex={i + 1}
        customerName={`${customer.firstName} ${customer.lastName}`}
        customerClassesRemaining={`${customer.classes_remaining} class(es) left`}
        customerPackage = {customer.name}
        customerExpiration = {`Expiration: ${customer.expiration_date}`}
        
      />
    ))

Answer 1

你可以试试，

customerClassesRemaining2 = customer.classes_remaining == 1 ? `${customer.classes_remaining} class left` : `${customer.classes_remaining} classes left`;

Answer 2

使用三元运算符，例如：

customerClassesRemaining={`${customer.classes_remaining} class${customer.classes_remaining > 1 ? 'es' : ''} left`}