Using ternary operator and optional chaining in React Js

If not effectively used, ternary operators can make extra long and hard-to-read statements. Using ternary statements effectively is essential to writing clean and efficient code. Ternary operator and optional chaining are helpful when writing conditional rendering in JSX.

Simple if statement in ternary

Below is a simple usage of an if-else statement.

Simple if else statement

interface SignupFormProps  {
   hasError: boolean
   errorMessage: string
}
export const SignupForm = (props: SignupFormProps) =>{
   return(
      <>
         {props.hasError && props.errorMessage}
      </>
   )
}

My ternary
props.hasError && props.errorMessage
is equivalent to

if(props.hasError){
   return props.errorMessage
}

Simple if-else statement in ternary

interface SignupFormProps  {
  hasError: boolean
  errorMessage: string
  succesMessage: string
}
export const SignupForm = (props: SignupFormProps) =>{
 return(
  <>
    {props.hasError ? props.errorMessage : props.succesMessage}
  </>
 )
}

My ternary
props.hasError ? props.errorMessage: props.succesMessage
is equivalent to

if(props.hasError){
  return props.errorMessage
}
else {
  return props.succesMessage
}

Simple if statement with optional parameter

interface SignupFormProps  {
   mximumListSize?: number
}
export const SignupForm = (props: SignupFormProps) =>{
   return(
      <>
         {!!props.mximumListSize && props.mximumListSize > 10 && "Maximum list size exceeded"}
      </>
   )
}

The mximumListSize is optional, meaning it may have a value or be undefined. I cannot compare undefined with a number. Therefore I must check to see if mximumListSize is not undefined before comparing it with a number.

Here is the standard if statement for the same.

if(props.mximumListSize !== undefined && props.mximumListSize > 10){
   return "Maximum list size exceeded"
}

!!props.mximumListSize means

if(props.mximumListSize === undefined){
   return false;
}
else {
   return true;
}

Simple if-else statement with an optional array in optional chaining

Here I am trying to print the length and the first element of an optional array. Since the idList is optional, it may have a value or be undefined. Therefore, I must first check if the idList is not undefined before I try to access its properties.

interface SignupFormProps  {
   idList?: number[]
}
export const SignupForm = (props: SignupFormProps) =>{
   return(
      <>
         {props.idList?.length}
         {props.idList?.[0]}
      </>
   )
}

Note that I use a question mark in the ternary.
props.idList?.length

That means checking for the array length if props.idList is not undefined.

Below is the standard if-else equivalent.

if(props.idList){
   return props.idList.length
}
if(props.idList){
   return props.idList[0]
}

Handling optional function parameters in optional chaining

Here I receive an optional function reference onInputClick. I need to check if onInputClick is not undefined before I can execute it.

interface SignupFormProps  {
   onInputClick?: () => null
}
export const SignupForm = (props: SignupFormProps) =>{
   return(
      <>
         <input type="text" onClick={() => props.onInputClick?.()}/>
      </>
   )
}

The optional chaining props.onInputClick?.() is equivalent to

if(props.onInputClick){
   props.onInputClick?.()
}

Handling nested optional parameters in optional chaining

In this example, I am dealing with an optional parameter contact, an object with an optional parameter as its property. My goal is to access the first email address in the email array.

interface SignupFormProps  {
   contact?: Contact
}
interface Contact {
  email?: string[]
}
export const SignupForm = (props: SignupFormProps) =>{
   return(
      <>
         <input type="text" value={props.contact?.email?.[0]}/>
      </>
   )
}

There are two checks to this optional chaining.
props.contact?.email?.[0]

The contact parameter is optional, and I must check it for undefined. Then the email property is optional too. The same rules apply before I can access any properties of the email.

Below is how I can achieve the same.

if(props.contact && props.contact.email){
   return props.contact.email[0]
}