Условия

1-ый способ: if else

Если надо выполнить условие, то можно воспользоваться стандартными выражением if else.

export default function Message({isGuest}) {
  let message = "Текст для гостя";
  if (!isGuest) {
    message = "Текст для авторизованного пользователя";
  }
  
  return (
    <>
      <p>{message}</p>
    </>
  )
}

В зависимости от переданного параметра (пропса) будет выводиться определённый текст.

<Message isGuest={true} />  // Текст для гостя
<Message isGuest={false} /> // Текст для авторизованного пользователя

Пример кода на Playcode

2-ой способ: тернарный оператор

Код из первого примера можно сократить.

export default function Message({isGuest}) {
  return (
    <>
      <p>{isGuest && "Текст для гостя" || "Текст для авторизованного пользователя"}</p>
    </>
  )
}

Пример кода на Playcode

Также можно использовать синтаксис тернарного оператора.

export default function Message({isGuest}) {
  return (
    <>
      <p>{isGuest ? "Текст для гостя" : "Текст для авторизованного пользователя"}</p>
    </>
  )
}

Пример использования:

import React, { useState } from 'react';

function App() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <>
      <button onClick={() => setIsChecked(!isChecked)}>Отметить пункт</button>
        {isChecked ? "Пункт отмечен" : "Не отмечено"}
      </>
  )
}

В методе setIsChecked() перед параметром указывается «!», что означает, что надо задавать противоположное значение (т.е. если сейчас состояние isChecked равен true, то в метод будет передано false)