Conditional rendering in React

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 🔥

Published Jan 25, 2019