Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!

In a React component JSX you can dynamically decide to output some component or another, or just some portion of JSX, based on conditionals.

The most common way is probably the ternary operator:

const Pet = (props) => {
  return (
    {props.isDog ? <Dog /> : <Cat />}
  )
}

Another way, which works great when you conceptually have an if but not an else is to use the && operator, which works this way: if the expression before it evaluates to true, it prints the expression after it:

const Pet = (props) => {
  return (
    {props.isDog && <Dog />}
    {props.isCat && <Cat />}
  )
}

Download my free React Handbook


The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!

More react tutorials: