# Conditional rendering in React

> Learn how to conditionally render different JSX in a React component, using the ternary operator for if/else and the && operator when you only need an if.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2019-01-25 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/react-conditional-rendering/

In a [React](https://flaviocopes.com/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:

```js
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:

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