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 />}
  )
}

Lessons in this unit:

0:	Introduction
1:	How to render HTML in React
2:	▶︎ Conditional rendering in React
3:	How to loop inside React JSX
4:	React, how to make responsive JSX
5:	How to repeat displaying something in JSX
6:	How to move around blocks of code with React and Tailwind