Introduction

There are often cases where we need to return JSX conditionally. This concept is known as conditional rendering. In this case, we also include JSX conditionally.

If we don’t want to return anything then we can return null. Ternary operators can also be used to conditionally return different JSX for example:

{a ? <A/> : <B/>}

Examples of conditional rendering:

{a ? <A/> : <B/>} // if a is true then return <A/> else return <B />
{a && <A />} // if a is true then return <A/> else do nothing
// if a is greater 0 then return <A/> else return null
if(a>0){
  return <A />
}
return null;