React: Условное приветствие

Сделай условный рендеринг: компонент Greeting выводит “Привет, user” при авторизации и “Войдите” — иначе. Только без useState.

Отличная разминка! Нам часто нужно показывать разные сообщения в зависимости от статуса пользователя. Твоя задача — сделать это чисто и просто, без состояния, только на пропсах.

Что нужно сделать

Реализуй компонент Greeting, который принимает пропсы:
- isAuthenticated: boolean — признак авторизации,
- name: string — имя пользователя (по умолчанию 'user').
Если isAuthenticated === true — показывай текст: Привет, {name}.
Если isAuthenticated === false — показывай текст: Войдите.
Не используй useState — в этой задаче достаточно условного рендера по пропсам.

Финальный вид

Компонент должен корректно показывать оба состояния: для авторизованного пользователя и для гостя.

Финальный результат должен быть таким:

💡 Подсказка

Используй тернарный оператор: {isAuthenticated ? 'Привет, ' + name : 'Войдите'}.
Можно деструктурировать пропсы с дефолтом: function Greeting({ isAuthenticated, name = 'user' }).
Состояние здесь не нужно — всё основано на приходящих данных.
Документация: react.dev/learn/conditional-rendering

👀 Решение

import React from 'react';
import './styles.css';
 
export function Greeting({ isAuthenticated, name = 'user' }) {
  return (
    <div className="greeting-card" data-testid="greeting">
      <p className="greeting-text">
        {isAuthenticated ? `Привет, ${name}` : 'Войдите'}
      </p>
    </div>
  );
}
 
export default function App() {
  return (
    <main className="challenge-container">
      <section>
        <div className="greeting-card">
          <Greeting isAuthenticated={true} name="Александр" />
        </div>
        <div className="greeting-card" style={{ marginTop: 16 }}>
          <Greeting isAuthenticated={false} />
        </div>
      </section>
    </main>
  );
}

Почему это работает: Логика построена на пропсах, а не на состоянии. isAuthenticated определяет, какой текст отобразить, а name используется только в ветке авторизации. За счёт тернарного оператора компонент остаётся простым, предсказуемым и легко тестируемым.

Что нужно сделать

Финальный вид

React: Условное приветствие

Что нужно сделать

Финальный вид

🧑‍💻 Это не баг! Это фича!