Условный рендеринг в React

В JSX компонента React вы можете динамически принимать решение о выводе того или иного компонента или только некоторой части JSX на основе условных выражений.

Наиболее распространенным способом, вероятно, является троичный оператор:

const Pet = (props) => {
  return (
    {props.isDog ?  : }
  )
}

Другой способ, который отлично работает, когда у вас концептуально есть if , но нет else , – это использовать оператор && , который работает следующим образом: если выражение перед ним оценивается как true, оно выводит выражение после него:

const Pet = (props) => {
  return (
    {props.isDog && }
    {props.isCat && }
  )
}

Оригинал: “https://flaviocopes.com/react-conditional-rendering/”